為什麼在類別中使用 :nth-child(even/odd) 時我的交替顏色會重設？

：具有類別問題的第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;
}

說明：

• The前兩條規則設定「父」元素的交替顏色。 >
後續規則使用~ 組合器在之後切換顏色非「父」元素。 >
• 限制：

雖然此方法允許您為有限數量的非「父」元素實現交替顏色，但您可以擴展此方法的程度是有限的接近。 🎜>

以上是為什麼在類別中使用 :nth-child(even/odd) 時我的交替顏色會重設？的詳細內容。更多資訊請關注PHP中文網其他相關文章！