从第 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 个子元素并且 具有 class1 类”，而不是“具有该元素的第 4 个元素容器中的类'。 nth-of-type 选择器只能选择特定类型（标签名称）的元素，因此您可以例如在 dl 列表中将 dt 元素与 dd 元素分开计数。 CSS Selectors 4 草稿中有 nth-child(4 of .class1) 语法，但目前在最新版本的 Safari 中支持 only。

使用大多数浏览器支持的 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。

Answer 2

据我所知，纯 css 无法实现您想要完成的任务。 （如果我被证明是错误的，我会很高兴。）。但是，您可以简单地使用 jQuery 完成您想要的。这是一个工作示例：

http://jsbin.com/fumeq/2/

Answer 3

另一种方法是 - 将元素添加为您还需要的隐藏元素。参考您的 jsfiddle，这意味着您可以像这样解决问题：

.hide{
  display:none;
}

.class2 {
    background-color: blue;
    color: white;
}

.class1:nth-child(4n):not(.class2) {
border: 1px solid red;
}

<ul>
    <li class="class1">content</li>
    <li class="class1">content</li>
      <li class="hide">helper</li>
      <li class="hide">helper</li>
      <li class="hide">helper</li>
    <li class="class1 class2">content</li>
    <li class="class1">content</li>
    <li class="class1">content</li>
    <li class="class1">content</li>
    <li class="class1">content</li>
    <li class="class1">content</li>
</ul>

Answer 4

不是一个直接的答案，但如果你只是覆盖以前的 CSS 样式，它会起作用吗？

.class1:nth-child(4n) { color: red; }
.class2 { color: inherit !important; }

Answer 5

根据我的理解，您希望选择（并设置样式）此清单中的每四个元素。但是，如果这些选定元素中的任何一个附加了一个附加类（名为“class2”或就此而言，任何类名），那么您不想对其应用任何样式。

您可以使用纯 CSS 来做到这一点。而不是使用以下 CSS 选择器：

.class1:not(.class2):nth-child(4n) {
    color: Blue;
}

你可以使用：

li[class="class1"]:nth-child(4n) {
    color:Orange;
}

看到这个小提琴：http://jsfiddle.net/kLpb5/

我希望这能解决你的问题。