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

借助大多数浏览器支持的CSS，您可以重置计数器＆＃39;在您想要排除计数的元素之后，启动新计数器＆＃39;对于列表的其余部分：

.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

根据我的理解，您希望选择（和样式）此列表中的每个第四个元素。但是，如果这些选定元素中的任何一个附加了一个类别（名为＆＃39; class2＆＃39;或者就此而言，无论是什么类名称），那么您就不希望在其上应用任何样式。 / p>

您可以使用纯CSS执行此操作。而不是使用以下CSS选择器：

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

你可以使用：

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

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

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

从nth-child模式中排除元素

5 个答案: