跳過不符元素時如何使用 :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中文網其他相關文章！