当非父元素存在时，如何使用 :nth-child(even/odd) 选择器切换颜色？

具有类问题的 nth-child(偶数/奇数) 选择器

当为 a 实现 :nth-child(奇数/偶数) 选择器时基于类的列表，通常会遇到颜色重置问题。在提供的示例中，元素本应继承文本的颜色，但它们却进行了重置。

出现此问题的原因是：nth-​​child（偶数/奇数）选择器本质上以所有子元素为目标，无论类或其他属性。为了解决这个问题，可以使用~通用兄弟组合器。

这个概念涉及在遇到非 .parent 元素后切换后续 .parent 元素的颜色。以下是 CSS 的细分：

/* Initial even/odd coloring */
.parent:nth-child(odd) {
    background-color: green;
}

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

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

li:not(.parent) ~ .parent:nth-child(even) {
    background-color: green;
}

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

即使存在非 .parent 元素，该解决方案也允许在颜色之间切换。然而，值得注意的是，这种方法有局限性，只能用于有限数量的排除元素。

通过实施此策略，您可以有效地将 :nth-child(odd/even) 选择器应用于基于类的列表并实现所需的交替配色方案，确保列表项继承其文本内容的颜色。

以上是当非父元素存在时，如何使用 :nth-child(even/odd) 选择器切换颜色？的详细内容。更多信息请关注PHP中文网其他相关文章！