编写特定的第n个子选择器

Question

对于以下情况，我需要一些在CSS中编写第n个子选择器的帮助

孩子#1，#4，#7，#10，...应该有特定的css

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

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

谢谢!

Answer 1

对于第二个问题，您可以使用:not(:nth-child(3n-2))

Answer 2

孩子们是#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, ... */
}

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

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

.child:not(:nth-child(3n-2)) {
    /* #2, #3, #5, #6, ... */
}