Question

是否可以让nth-child伪选择器与特定类一起使用？

我希望第二个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

由于没有:nth-of-class()选择器，因此无法按CSS在类中进行过滤。解决此问题的一种方法是将两种不同类型的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（）和nth-of-type（）会有不同的反应，因为文档中只有八个相同类型的标签。

对于您提供的代码不应该有任何区别。我测试了它，两个伪类按预期工作。但是，总的来说：

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

:nth-of-type()在给定类型的兄弟级别上运行，而不考虑其他简单的选择器。然后，如果该类型出现的第n个元素不在简单选择器匹配的内容中，则不匹配任何内容。

Answer 2

您可以使用通用兄弟组合器：

div,
div.red ~ div.red ~ div.red {
  background: gray;
}
div.red ~ div.red {
  background: red;
}

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

它可以通过CSS预处理器自动化，如果我正确理解gzip，因为CSS输出只是重复相同的文本，gziped文件大小不应该非常大，除非你经常使用它。

Answer 3

我找到了一个更简单的解决方案，可以在没有任何特殊代码的情况下使用我的div。

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

在没有前面的div的情况下工作得很好。

n-child没有回应课堂

3 个答案: