关于css：nth-??child对类没有反应


nth-child doesn't respond to class

本问题已经有最佳答案，请猛点这里访问。

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

请参见以下示例：
http://jsfiddle.net/fZGvH/

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

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

1
div.red:nth-child(6)

指定此选项后，会将第8个DIV更改为红色：

1
div.red:nth-child(9)

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

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

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

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

相关讨论

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

1
 

使用此选择器：

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

关于您问题的最后一点：

And I don't understand why nth-child() and nth-of-type() respond differently, since there are only eight tags of the same type in the document.

对于您提供的代码，应该没有任何区别。我对其进行了测试，并且两个伪类均按预期工作。但是，通常：

:nth-child()在整个同级级别上运行，而不考虑任何其他简单的选择器。然后，如果第n个孩子不在简单选择器匹配的对象之中，则不匹配任何内容。

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

相关讨论

您可以使用常规的同级组合器：

1
2
3
4
5
6
7
div,
div.red ~ div.red ~ div.red {
  background: gray;
}
div.red ~ div.red {
  background: red;
}

这很冗长，您需要重新设置样式，但是在某些特殊情况下可能很有用。

它可以使用CSS预处理器自动执行，如果我正确理解gzip，由于CSS输出只是重复相同的文本，因此gziped文件的大小不应该太大，除非您经常使用它。

有一个更简单的解决方案，我发现它可以与我的div一起使用，而无需任何特殊的代码行。

1
2
.red div:nth-child(6) {background-color:#ccc;}
.red div:nth-child(9) {background-color:#eee;}

在没有div的情况下也可以正常工作。

相关讨论