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

具有类别的第 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中文网其他相关文章！