为什么在类中使用 :nth-child(even/odd) 时我的交替颜色会重置？

：具有类问题的第 n 个子级（偶数/奇数）选择器

您的目标是应用交替颜色来列出具有“父级”的项目“ 班级。但是，您会遇到颜色重置问题。要解决此问题，请考虑以下内容：

解决方案：

由于 CSS 规则是从上到下应用的，因此 :nth-child(偶数/奇数) 选择器可能会覆盖以前的颜色设置。要解决这个问题，请使用通用同级组合器 (~) 在非“父”元素之后切换颜色：

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

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

说明：

• The前两条规则设置“父”元素的交替颜色。
• 后续规则使用 ~ 组合器在之后切换颜色非“父”元素。
• 每组规则都会以更高的特异性交替颜色，确保所需的行为。

限制：

虽然此方法允许您为有限数量的非“父”元素实现交替颜色，但您可以扩展此方法的程度是有限的接近。

以上是为什么在类中使用 :nth-child(even/odd) 时我的交替颜色会重置？的详细内容。更多信息请关注PHP中文网其他相关文章！