nth-child没有回复课程

Question

nth-child没有回复课程

是否有可能让第n个子伪选择器与特定类一起工作？

看到这个例子：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（）的响应不同，因为文档中只有八个相同类型的标签。

Answer 1

有一个更简单的解决方案，我发现我的div没有任何特殊的代码行。.red div:nth-child(6) {background-color:#ccc;}.red div:nth-child(9) {background-color:#eee;}工作得很好，没有前面的div。