可以让第n个子类的伪选择器与特定的类一起工作吗?
请参阅此示例:http://jsfiddle.net/fZGvH/
我想让第二个DIV.red变成红色,但它没有像预期的那样应用颜色。
不仅如此,当您指定此选项时,它会将第5个DIV更改为red:
div.red:nth-child(6)
指定此选项时,它会将第8个DIV更改为红色:
div.red:nth-child(9)
它似乎落后了一个DIV。在这个例子中只有8个DIV标签,所以我不知道为什么第n个孩子(9)可以工作。使用Firefox3.6进行测试,但在我的实际生产代码中,Chrome也出现了同样的问题。我不明白这是如何工作的一些东西,希望能澄清。
此外,这会将第6个DIV.red更改为red,但实际上我希望它将第二个DIV更改为red:
div.red:nth-of-type(6)
我不明白为什么nth-child()和nth- of - type ()会有不同的响应,因为文档中只有8个相同类型的标记。
发布于 2012-05-24 18:54:16
您可以使用常规的同级组合器:
div,
div.red ~ div.red ~ div.red {
background: gray;
}
div.red ~ div.red {
background: red;
}
它很冗长,您需要重新设置样式,但在某些特殊情况下可能会很有用。
它可以通过CSS预处理器自动完成,如果我对gzip的理解正确的话,因为CSS输出只是重复相同的文本,所以gziped文件的大小不应该太大,除非你经常使用它。
发布于 2012-12-01 12:10:57
我发现有一个更简单的解决方案,可以在不使用任何特殊代码行的情况下使用我的div。
.red div:nth-child(6) {background-color:#ccc;}
.red div:nth-child(9) {background-color:#eee;}
在前面没有div的情况下工作得也很好。
https://stackoverflow.com/questions/5428676
复制相似问题