从nth-child模式中排除元素

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>

我想使用a .class1:nth-child(4n)来选择每个第4个元素,但是如果一个元素有两个class1并且class2我不希望它被包含在"每第四个"计数中 - 我只是希望它被忽略.

我试过了.class1:not(.class2):nth-child(4n),但它似乎没有用.有任何想法吗？

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

Answer 1

nth-child选择器只计算任何子节点,因此.class1:nth-child(4)意味着'元素是容器的第4个子元素并且具有class1类',而不是' 容器中具有该类的第4个元素'.该nth-of-type选择器可以选择特定类型(标签名称)的唯一元素,所以你可以,例如,数dt分别从元素dd的元素dl列表.CSS Selectors 4草案中有nth-child(4 of .class1)语法,但目前仅在最新版本的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;
}

等等(见更新小提琴).

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