第 n 个孩子没有响应课程 [重复]

是否可以让 nth-child 伪选择器与特定的类一起使用？

看这个例子：http://jsfiddle.net/fZGvH/ http://jsfiddle.net/fZGvH/

我想让第二个 DIV.red 变成红色，但它没有按预期应用颜色。

不仅如此，当您指定它时，它会将第 5 个 DIV 更改为红色：

div.red:nth-child(6)

当您指定此项时，它将第 8 个 DIV 更改为红色：

div.red:nth-child(9)

似乎落后了一个DIV。示例中只有 8 个 DIV 标签，所以我不知道为什么 nth-child(9) 甚至可以工作。使用Firefox 3.6进行测试，但在我的实际生产代码中，Chrome中出现了同样的问题。我不明白这是如何工作的，希望得到澄清。

另外，这会将第 6 个 DIV 更改为红色，但我真正想要的是将第二个 DIV.red 更改为红色：

div.red:nth-of-type(6)

我不明白为什么 nth-child() 和 nth-of-type() 的响应不同，因为文档中只有八个相同类型的标签。

CSS 中无法按类进行过滤，因为没有:nth-of-class()选择器。解决这个问题的一种方法是将两种不同的div进入自己的组，然后根据这些组进行选择。例如：

<div class="orange">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="red">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

使用这个选择器：

div.red div:nth-child(2) {
    background: red;
}

关于你问题的最后一点：

我不明白为什么 nth-child() 和 nth-of-type() 的响应不同，因为文档中只有八个相同类型的标签。

对于你在那里给出的代码不应该有什么区别。我测试了一下，两个伪类按预期工作。但是，一般来说：

:nth-child()对整个兄弟级别进行操作，而不考虑任何其他简单选择器。然后，如果第 n 个子级不在简单选择器匹配的范围内，则不会匹配任何内容。

:nth-of-type()在给定类型的同级级别上进行操作，而不考虑其他简单选择器。然后，如果该类型出现的第 n 个元素不在简单选择器的匹配范围内，则不会匹配任何内容。