为什么第n个类型的选择器不起作用

Question

我正在尝试让nth-of-type选择器设置第三条Article元素的样式，但这并没有任何区别

section {
  display: flex;
  background: grey;
  border-radius: 3px;
  Height: 1000px;
}

article:nth-of-type (3) {
  flex: 3 200px;
  display: flex;
}

article {
  background: yellow;
  margin: 5px;
  border-radius: 5px;
  Padding: 4px;
  border-style: solid;
  height: 50%;
  display: flex;
  Flex: 1 200px;
}

header {
  background: pink;
  height: 50px;
  text-align: center;
  padding: 20px;
  Margin: 0px;
  border-style: solid;
  border-radius: 5px;
}

<header>
  Hello
</header>
<section>
  <article>
    Hello
  </article>
  <article>
    Hello
  </article>
  <article>
    <div>
      hello
    </div>
    <div>
      hello
    </div>

    <div>
      hello
    </div>
  </article>
</section>

我正在尝试使用nth-of-type来设置第三条Article元素的样式，但是nth-of-type-selector及其规则与第三条article元素没有区别。我正在尝试将其flex值设为3，以使其比前2个更大

Answer 1

删除这样的空间：

更改：

article:nth-of-type (3) {
//                 ^-------------
//Rules...
}

收件人：

article:nth-of-type(3) {
 //Rules...
}

section {
  display: flex;
  background: grey;
  border-radius: 3px;
  Height: 1000px;
}

article:nth-of-type(3) {
  flex: 3 200px;
  display: flex;
  background:orange;
}

article {
  background: yellow;
  margin: 5px;
  border-radius: 5px;
  Padding: 4px;
  border-style: solid;
  height: 50%;
  display: flex;
  Flex: 1 200px;
}

header {
  background: pink;
  height: 50px;
  text-align: center;
  padding: 20px;
  Margin: 0px;
  border-style: solid;
  border-radius: 5px;
}

<header>
  Hello
</header>
<section>
  <article>
    Hello
  </article>
  <article>
    Hello
  </article>
  <article>
    <div>
      hello
    </div>
    <div>
      hello
    </div>

    <div>
      hello
    </div>
  </article>
</section>

Answer 2

这是因为您在:nth-of-type和(3)之间留有多余的空间。

您应该改用:nth-of-type(3)。