1

在以下情况下，我需要一些帮助来编写 CSS 中的 nth-child 选择器

孩子 #1、#4、#7、#10，... 应该有特定的 css
孩子 #2、#3、#5、#6，... 应该有一些其他特定的 css

第一个有这个 (:nth-child(3n-2)) ，但第二个想不出什么。

谢谢！

4

2 回答 2

3

孩子 #2、#3、#5、#6、... 只是孩子 #1、#4、#7、#10...以外的任何东西吗？

如果是这样，您可以为所有子项创建一个规则，然后覆盖子项#1、#4、#7、#10...的样式，如下所示：

.child {
    /* All children */
}

.child:nth-child(3n-2) {
    /* Override for #1, #4, #7, #10, ... */
}

或者，如果您需要在不覆盖的情况下专门将样式应用于这些子项，则可以在单独的规则中否定相同:nth-child()的：:not()

.child:nth-child(3n-2) {
    /* #1, #4, #7, #10, ... */
}

.child:not(:nth-child(3n-2)) {
    /* #2, #3, #5, #6, ... */
}
于 2013-04-10T16:14:23.230 回答
2

你可以用:not(:nth-child(3n-2))第二个

于 2013-04-10T16:13:07.920 回答