html - :nth-​​child(偶/奇)选择器，带有类

This question already has answers here:

Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?

(7个答案)


3年前关闭。




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

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

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

有没有办法做到这一点？

最佳答案

通常，您想要的是不可能的，但是对于有限数量的“排除”元素，有一种方法可以实现所需的行为: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所能达到的程度非常接近。

关于html - :nth-​​child(偶/奇)选择器，带有类，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17458582/