我正在尝试将奇/偶选择符应用于列表中与父类的所有元素.
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;
}
但颜色正在重置.我希望列表项是文本的颜色.
有没有办法做到这一点？
解决方法
一般来说,你想要的是不可能的,但是有一种方法可以实现有限数量的“排除”元素所需的行为：
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;
}
当然,有一个人愿意接受这一点是有限的,但是它与纯CSS一样接近.
