：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 选择器不会查看“类”或其他任何内容来进行计数。他们只查看（1）所有元素，或（2）某种“类型”的所有元素（不是类，不是属性，除了元素的类型——div 或 li 等）。

因此，如果您不知道确切的 html 结构，就不能使用纯 CSS 跳过它（然后，只有当您实际上正在处理一些元素时——请参阅 Jon 的回答以了解您需要知道的一种方式您正在处理多少个非父元素，正如您所见，他指出实际限制非常小），或者使用 javascript。

Answer 3

只有具有nth-match 的 CSS 选择器 4 才有可能。

在现有的 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 并将其粘贴到其他人演示其方法的地方。

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