:具有类问题的第 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; }
说明:
限制:
虽然此方法允许您为有限数量的非“父”元素实现交替颜色,但您可以扩展此方法的程度是有限的接近。
以上是为什么在类中使用 :nth-child(even/odd) 时我的交替颜色会重置?的详细内容。更多信息请关注PHP中文网其他相关文章!