首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >第n个孩子不响应类

第n个孩子不响应类
EN

Stack Overflow用户
提问于 2011-03-25 12:52:31
回答 2查看 81.3K关注 0票数 60

可以让第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个相同类型的标记。

EN

回答 2

Stack Overflow用户

发布于 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文件的大小不应该太大,除非你经常使用它。

票数 11
EN

Stack Overflow用户

发布于 2012-12-01 12:10:57

我发现有一个更简单的解决方案,可以在不使用任何特殊代码行的情况下使用我的div。

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

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

票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/5428676

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档