如何使用第 n 個子選擇器對具有「父」類別的清單項目套用交替顏色？

具有類別的第N 個子級選擇器：克服重置顏色

嘗試應用交替顏色來列出具有「父」類別的項目，您可能遇到某些不匹配元素後顏色重置的問題。此問題的出現​​是由於 :nth-child 選擇器的限制。

但是，有使用通用同級組合器 (~) 的解決方法。透過為不匹配元素後面的元素定義規則，您可以切換後續匹配元素的顏色。方法如下：

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

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

/* Toggle colors again after second non-parent element */
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;
}

透過這種方法，每個 :not(.parent) 元素都充當「重置」點，切換 последующие соответствующиеэлемены 的顏色。儘管它在擴展距離方面有限制，但它是最接近使用純 CSS 交替顏色的方法。

以上是如何使用第 n 個子選擇器對具有「父」類別的清單項目套用交替顏色？的詳細內容。更多資訊請關注PHP中文網其他相關文章！