css - nth-child 对类没有反应

这个问题在这里已经有了答案:





Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?

(8 个回答)


6年前关闭。




是否可以让 nth-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;
}

关于你问题的最后一点:



对于您提供的代码， 不应该与 有任何区别。我测试了它，两个伪类按预期工作。但是，一般来说:
:nth-child() 在不考虑任何其他简单选择器的情况下在整个兄弟级上运行。然后，如果第 n 个 child 不在简单选择器匹配的范围内，则不会匹配任何内容。
:nth-of-type() 在给定类型的同级级别上运行，而不考虑其他简单选择器。然后，如果该类型出现的第 n 个元素不在简单选择器匹配的元素中，则没有匹配。

关于css - nth-child 对类没有反应，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/5428676/