nth-child对班级无反应

Question

是否可以使第n个子级伪选择器与特定类一起使用？

我想让第二个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更改为红色，但是我真正想要的是将第2个DIV.red更改为红色：

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

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

Answer 1

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

<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个元素不在简单选择器匹配的元素之中，则不匹配任何内容。