n-child没有回应课堂

Question

是否有可能让第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

没有办法在CSS中按类过滤,因为没有:nth-of-class()选择器.解决这个问题的一种方法是将两种不同的divs放入他们自己的组中,然后根据这些组进行选择.例如:

<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 div:nth-child(6) {background-color:#ccc;}
.red div:nth-child(9) {background-color:#eee;}

前面没有 div 也能正常工作。