Html :nth-child(even/odd) 选择器类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17458582/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
:nth-child(even/odd) selector with class
提问by nilsi
I'm trying to apply odd/even selectors to all elements in a list with the class parent.
我正在尝试将奇数/偶数选择器应用于具有类父级的列表中的所有元素。
HTML:
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:
CSS：
.parent:nth-child(odd) {
background-color: green;
}
.parent:nth-child(even) {
background-color: red;
}
ul {
width:100px;
height: 100px;
display: block;
}
But the colors are resetting. I want the list items to be the color of the text.
但是颜色正在重置。我希望列表项是文本的颜色。
Is there a way to do this?
有没有办法做到这一点？
回答by Jon
In general what you want is not possible, but there is a way to achieve the desired behavior for limited numbers of "excluded" elements: the general sibling combinator~.
一般来说，您想要的是不可能的，但有一种方法可以为有限数量的“排除”元素实现所需的行为：一般兄弟组合器~。
The idea is that for each occurrence of a non-.parentelement subsequent .parentelements will have their colors toggled:
这个想法是，对于每次出现非.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;
}
Of course there is a limit to how far one would be willing to take this, but it's as close as you can get with pure CSS.
当然，人们愿意接受的程度是有限的，但它与纯 CSS 所能达到的程度一样接近。
回答by ScottS
This is a common misperception
这是一个普遍的误解
The :nth-childand :nth-of-typeselectors do not look at "class" or anything else for counting. They only look at either (1) all elements, or (2) all elements of a certain "type" (not class, not an attribute, nothing but the typeof element--divor lietc.).
该:nth-child和:nth-of-type选择不看“类”或其他任何计数。他们只会看：（1）所有元素，或（2）一定的“类型”的所有元素（不类，而不是一个属性，不过是类型的element--div或li等）。
So you cannot skip it with pure CSS without either knowing your exact html structure (and then, only if there are in fact a few elements you are dealing with--see Jon's answer for one such way, where you need to know how many non-parent elements you are dealing with, and as you can see and he notes the practical limits are very small), or by using javascript.
所以你不能在不知道你确切的 html 结构的情况下使用纯 CSS 跳过它（然后，只有当你正在处理一些元素时 - 请参阅 Jon 对这样一种方式的回答，在那里你需要知道有多少非-parent 元素，正如您所看到的，他指出实际限制非常小），或者使用 javascript。
回答by Ilya Streltsyn
It will be possible only with CSS Selectors 4 which will have nth-match.
只有具有nth-match 的CSS Selectors 4 才有可能。
In the existing CSS it can be done only in some limited situations using the general sibling combinator multuple times, like in @Jon's answer or even in a more 'mechanical' way (example):
在现有的 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;
}
In practice, it seems better to me to use JS/jQuery for this.
在实践中，对我来说使用 JS/jQuery 似乎更好。
回答by Corion
CSS
CSS
The other reliable way to replicate this currently is with the adjacent sibling selector:
当前复制此内容的另一种可靠方法是使用相邻的兄弟选择器：
.parent,
.parent + .parent + .parent,
.parent + .parent + .parent + .parent + .parent /* etc */
{ background-color: green; }
.parent + .parent,
.parent + .parent + .parent + .parent /* etc */
{ background-color: red; }
You have three options:
您有三个选择：
- Use the
not()selector. This will keep your highlighting going indefinitely, but it will occasionally flip the order that it highlights in. Use this option if your list could have huge groupings of the elements you want to highlight. - Use the
+(adjacent sibling) selector. This option will not keep highlighting indefinitely, but it guarantees that the order will never be flipped. Use this option if your list will have smaller groupings of highlighted elements together. - Use the
~(any sibling) selector. I would not recommend this as the list will fail to highlight properly based on total list length rather than total matching siblings. This will always fail before the other two options, and more noticeably.
- 使用
not()选择器。这将使您的突出显示无限期地进行，但它偶尔会翻转它在. 如果您的列表可能包含大量要突出显示的元素，请使用此选项。 - 使用
+（相邻兄弟）选择器。此选项不会无限期地高亮显示，但可以保证永远不会翻转顺序。如果您的列表将有较小的突出显示元素分组在一起，请使用此选项。 - 使用
~（任何兄弟）选择器。我不建议这样做，因为列表将无法根据总列表长度而不是总匹配的兄弟姐妹正确突出显示。这将始终在其他两个选项之前失败，并且更明显。
Fiddle here: http://jsfiddle.net/corymcd/kVcZJ/
在这里小提琴：http: //jsfiddle.net/corymcd/kVcZJ/
Feel free to copy the HTML from this and paste it into the ones that the other people demonstrated their methods with.
随意从中复制 HTML 并将其粘贴到其他人演示其方法的那些中。
jQuery
jQuery
As stated before, using something like jQuery would easily allow you to either assign your elements even/odd classes or simply change the inline style.
如前所述，使用 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');
}
});
Fiddle here: http://jsfiddle.net/corymcd/kAPvX
在这里小提琴：http: //jsfiddle.net/corymcd/kAPvX
