跳过不匹配元素时如何使用 :nth-child 替换元素颜色？

:nth-child(even/odd) 选择器，具有 Class

在 CSS 中，:nth-child(n) 选择器选择元素这是他们父母的第 n 个孩子。当 n 为奇数时，nth-child(odd) 选择器选择奇数元素，当 n 为偶数时，nth-child(even) 选择器选择偶数元素。

考虑以下 HTML 标记，我们想要应用 :nth-child 选择器来列出具有“parent”类的项目：

<ul>
    <li class="parent">green</li>
    <li class="parent">red</li>
    <li>ho ho ho</li>
    <li class="parent">green</li>
    <li class="parent">red</li>
</ul>

将以下 CSS 应用于上面的 HTML：

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

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

出乎意料的是，在第一个非 .parent 元素之后重置元素的颜色。这是因为 :nth-child 选择器适用于列表中的所有元素，而不仅仅是那些具有“parent”类的元素。

为了实现所需的行为，我们需要使用通用兄弟组合器 (~) ，它选择 DOM 树中另一个元素之前的元素。通过将其与 :nth-child 选择器相结合，我们可以在每次遇到非 .parent 元素时替换“.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 元素。但是，:nth-child 选择器可以向前查找的非 .parent 元素的数量是有限的，因此这种技术对于具有许多交替类的很长列表可能不实用。

以上是跳过不匹配元素时如何使用 :nth-child 替换元素颜色？的详细内容。更多信息请关注PHP中文网其他相关文章！