<分区>
标签 css css-selectors
<分区>
是否有可能让第 n 个 child 伪选择器与特定类一起工作？
看这个例子: 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;
}
关于你的最后一点问题:
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() 对整个级别的 sibling 进行操作，而不考虑任何其他简单的选择器。然后，如果第 n 个 child 不在简单选择器匹配的内容中，则不会匹配任何内容。
:nth-of-type() 在给定类型的兄弟级别上运行，而不考虑其他简单选择器。然后，如果出现该类型的第 n 个元素不在简单选择器匹配的元素中，则不会匹配任何内容。
关于css - 第 n 个 child 对类没有反应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29205371/