css - 从第 n 个子模式中排除一个元素

Question

假设我有这些元素:

<li class="class1">content</li>
<li class="class1">content</li>
<li class="class1 class2">content</li>
<li class="class1">content</li>
<li class="class1">content</li> <!-- I want nth-child(4n) to select this-->
<li class="class1">content</li>
<li class="class1">content</li>
<li class="class1">content</li>

我想使用 .class1:nth-child(4n) 来选择每第 4 个元素，但是如果一个元素同时具有 class1 和 class2 我不希望它包含在“每 4 次”计数中——我只是希望它被忽略。

我试过 .class1:not(.class2):nth-child(4n)，但它似乎不起作用。有什么想法吗？

这是一个用于实验的 JSFiddle:http://jsfiddle.net/jWxb6/2/

Answer 1

nth-child 选择器只计算所有子节点，所以 .class1:nth-child(4) 表示“元素是容器的第 4 个子节点 and 具有 class1 类'，而不是'容器中具有该类的第 4 个元素'。 nth-of-type 选择器只能选择特定类型(标记名称)的元素，因此您可以，例如，从 dd< 中分别计算 dt 元素 dl 列表中的元素。 CSS Selectors 4 中有 nth-child(4 of .class1) 语法草案，但目前支持 only在最新版本的 Safari 中。

使用大多数浏览器支持的 CSS，您可以在要从计数中排除的元素之后“重置计数器”，并为列表的其余部分“启动新计数器”:

.class1:nth-child(4n) {
    list-style-type: circle;
}

.class1.class2, .class2 ~ .class1:nth-child(4n) {
    list-style-type: disc;
}
.class2 ~ .class1:nth-child(4n + 1) {
    list-style-type: circle;
}

等等(参见 updated fiddle)。

或者，您可以更改标记并使用不同的标签而不是类和nth-of-type。