首页 >web前端 >css教程 >为什么在类中使用 :nth-child(even/odd) 时我的交替颜色会重置?

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

Susan Sarandon
Susan Sarandon原创
2024-11-08 07:13:021045浏览

Why are My Alternating Colors Resetting When Using :nth-child(even/odd) with a Class?

:具有类问题的第 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中文网其他相关文章!

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