首页 >web前端 >css教程 >如何使用第 n 个子选择器对具有'父”类的列表项应用交替颜色?

如何使用第 n 个子选择器对具有'父”类的列表项应用交替颜色?

Linda Hamilton
Linda Hamilton原创
2024-11-09 04:21:02999浏览

How to Apply Alternating Colors to List Items with the

具有类别的第 N 个子级选择器:克服重置颜色

尝试应用交替颜色来列出具有“父”类别的项目,您可能遇到过某些不匹配元素后颜色重置的问题。此问题的出现是由于 :nth-child 选择器的限制。

但是,存在使用通用同级组合器 (~) 的解决方法。通过为不匹配元素后面的元素定义规则,您可以切换后续匹配元素的颜色。方法如下:

.parent:nth-child(odd) {
    background-color: green;
}
.parent:nth-child(even) {
    background-color: red;
}

/* Toggle colors after first non-parent element */
li:not(.parent) ~ .parent:nth-child(odd) {
    background-color: red;
}
li:not(.parent) ~ .parent:nth-child(even) {
    background-color: green;
}

/* Toggle colors again after second non-parent element */
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;
}

通过这种方法,每个 :not(.parent) 元素都充当“重置”点,切换 последующие соответствующие элементы 的颜色。尽管它在扩展距离方面有限制,但它是最接近使用纯 CSS 交替颜色的方法。

以上是如何使用第 n 个子选择器对具有'父”类的列表项应用交替颜色?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn