如何使用插入的非“.parent”元素替换“.parent”列表项的背景颜色？

使用 :nth-child(even/odd) 选择器和 Class:

您想要应用交替背景颜色来列出带有“.parent”类。但是，颜色当前已重置。

问题：
由于列表中存在非“.parent”元素，“.parent”元素未按预期运行.

解决方案:
通常情况下，仅使用:第n个子选择器。但是，您可以使用通用兄弟组合器 (~)：

1. 选择所有奇数“.parent”元素并应用“绿色”颜色。
2. 对于每个非“。 parent”元素，使用 ~.

CSS 切换以下“.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;
}

此方法会交替有限数量的“排除”非“.parent”元素的颜色，从而实现所需的交替模式。

以上是如何使用插入的非“.parent”元素替换“.parent”列表项的背景颜色？的详细内容。更多信息请关注PHP中文网其他相关文章！