首頁 > web前端 > css教學 > 為什麼在類別中使用 :nth-child(even/odd) 時我的交替顏色會重設?

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

Susan Sarandon
發布: 2024-11-08 07:13:02
原創
1063 人瀏覽過

Why are My Alternating Colors Resetting When Using :nth-child(even/odd) with a Class?

:具有類別問題的第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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板