：带有类的nth-child（偶数/奇数）选择器

Question

我正在尝试将奇数/偶数选择器应用于具有父类的列表中的所有元素。

HTML：

<ul>
    <li class="parent">green</li>
    <li class="parent">red</li>
    <li>ho ho ho</li>
    <li class="parent">green</li>
    <li class="parent">red</li>
</ul>

CSS：

.parent:nth-child(odd) {
    background-color: green;
}

.parent:nth-child(even) {
    background-color: red;
}

ul {
    width:100px;
    height: 100px;
    display: block;
}

Link to jsFiddle

但颜色正在重置。我希望列表项是文本的颜色。

有办法做到这一点吗？

Answer 1

一般来说，您想要的是不可能的，但有一种方法可以为有限数量的“排除”元素实现所需的行为：general sibling combinator ~。

这个想法是，对于非.parent元素的每次出现，后续的.parent元素都会切换颜色：

.parent:nth-child(odd) {
    background-color: green;
}
.parent:nth-child(even) {
    background-color: red;
}

/* after the first non-.parent, toggle colors */
li:not(.parent) ~ .parent:nth-child(odd) {
    background-color: red;
}
li:not(.parent) ~ .parent:nth-child(even) {
    background-color: green;
}

/* after the second non-.parent, toggle again */
li:not(.parent) ~ li:not(.parent) ~ .parent:nth-child(odd) {
    background-color: green;
}
li:not(.parent) ~ li:not(.parent) ~ .parent:nth-child(even) {
    background-color: red;
}

<强> See it in action

当然，人们愿意接受这一点的程度有限，但它与纯CSS一样接近。

Answer 2

这是一种常见的误解

:nth-child和:nth-of-type选择器不会查看“class”或其他任何内容进行计数。他们只查看（1）所有元素，或（2）某个“类型”的所有元素（不是类，而不是属性，除了输入元素 - div或li等。）。

所以你不能在不知道你的确切html结构的情况下用纯CSS跳过它（然后，只有当你正在处理一些元素时 - 请参阅Jon的答案，你需要知道您正在处理多少非父元素，正如您所看到的，他注意到实际限制非常小），或者使用javascript。

Answer 3

只有CSS选择器4才有nth-match。

在现有的CSS中，只能在一些有限的情况下使用一般兄弟组合器多次，例如@ Jon的答案，或者甚至以更“机械”的方式（example）：

.parent,
.parent ~ .parent ~ .parent,
.parent ~ .parent ~ .parent ~ .parent ~ .parent,
.parent ~ .parent ~ .parent ~ .parent ~ .parent ~ .parent ~ .parent
{
    background-color: green;
}

.parent ~ .parent,
.parent ~ .parent ~ .parent ~ .parent,
.parent ~ .parent ~ .parent ~ .parent ~ .parent ~ .parent,
.parent ~ .parent ~ .parent ~ .parent ~ .parent ~ .parent ~ .parent ~ .parent
{
    background-color: red;
}

在实践中，我似乎更好地使用JS / jQuery。

Answer 4

CSS

目前复制它的另一种可靠方法是使用相邻的兄弟选择器：

.parent,
.parent + .parent + .parent,
.parent + .parent + .parent + .parent + .parent /* etc */
{ background-color: green; }

.parent + .parent,
.parent + .parent + .parent + .parent /* etc */
{ background-color: red; }

您有三种选择：

• 使用not()选择器。这将使您的突出显示无限期地进行，但偶尔会翻转它突出显示的顺序。如果您的列表可能包含要突出显示的元素的大量分组，请使用此选项。
• 使用+（相邻的兄弟）选择器。此选项不会无限期突出显示，但它保证订单永远不会被翻转。如果您的列表中包含突出显示元素的较小分组，请使用此选项。
• 使用~（任何同级）选择器。 我不建议这样做，因为列表无法根据总列表长度而不是总匹配兄弟正确突出显示。这将始终在其他两个选项之前失败，更明显。

在这里小提琴：http://jsfiddle.net/corymcd/kVcZJ/

随意从中复制HTML并将其粘贴到其他人演示其方法的HTML中。

的jQuery

如前所述，使用类似jQuery的东西很容易让你分配你的元素偶数/奇数类或只是改变内联样式。

// Find all objects to highlight, remove all of the highlighting classes, 
// and then re-highlight.
$(".parent").removeClass('odd even').each(function(index) {
    var objPrev = $(this).prev('.parent');
    if( objPrev.hasClass('odd') ) {
        $(this).addClass('even');
    } else {
        $(this).addClass('odd');
    }    
});

在这里小提琴：http://jsfiddle.net/corymcd/kAPvX