21

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

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;
}

在此处输入图像描述

链接到 jsFiddle

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

有没有办法做到这一点？

4

4 回答 4

23

一般来说，你想要的东西是不可能的，但是有一种方法可以为有限数量的“排除”元素实现所需的行为：通用兄弟组合 ~器。

这个想法是，对于非元素的每次出现，.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;
}

看到它在行动。

当然，人们愿意走多远是有限度的，但它与纯 CSS 所能达到的一样接近。

于 2013-07-03T22:04:07.607 回答
12

这是一个常见的误解

:nth-childand选择器:nth-of-type不看“类”或其他任何东西来计数。他们只查看（1）所有元素，或（2）某种“类型”的所有元素（不是class，不是attribute，只是元素的类型-等等）。divli

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

于 2013-07-03T22:04:08.417 回答
6

只有具有nth-match的 CSS Selectors 4 才有可能。

在现有的 CSS 中，它只能在某些有限的情况下使用通用兄弟组合器多次完成，例如在@Jon 的回答中，甚至以更“机械”的方式（示例）：

.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 似乎更好。

于 2013-07-03T22:13:25.657 回答
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

于 2013-07-04T00:45:26.597 回答