當非父元素存在時，如何使用 :nth-child(even/odd) 選擇器切換顏色？

具有類別問題的nth-child(偶數/奇數) 選擇器

當為a 實作:nth-child(奇數/偶數) 選擇器時基於類別的列表，通常會遇到顏色重置問題。在提供的範例中，元素本應繼承文字的顏色，但它們卻進行了重設。

出現此問題的原因是：nth-​​child（偶數/奇數）選擇器本質上以所有子元素為目標，無論類別或其他屬性。為了解決這個問題，可以使用~通用兄弟組合器。

這個概念涉及在遇到非 .parent 元素後切換後續 .parent 元素的顏色。以下是 CSS 的細分：

/* Initial even/odd coloring */
.parent:nth-child(odd) {
    background-color: green;
}

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

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

li:not(.parent) ~ .parent:nth-child(even) {
    background-color: green;
}

/* Toggle colors after second non-.parent */
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 元素，該解決方案也允許在顏色之間切換。然而，值得注意的是，這種方法有局限性，只能用於有限數量的排除元素。

透過實作此策略，您可以有效地將:nth-child(odd/even) 選擇器應用於基於類別的清單並實現所需的交替配色方案，確保清單項目繼承其文字內容的顏色。

以上是當非父元素存在時，如何使用 :nth-child(even/odd) 選擇器切換顏色？的詳細內容。更多資訊請關注PHP中文網其他相關文章！