CSS 中的偶數與奇數列表項樣式：`li:odd`/`:even` 或 `:nth-child()`？

偶數和奇數列表元素的樣式：偽類與第n 個子元素

當嘗試使用CSS 偽類實現列表項的交替顏色時，您可以遇到問題。雖然為此目的使用 li:odd 和 li:even 似乎合乎邏輯，但其行為可能是不可預測的。

要有效地設定列表項的偶數和奇數實例的樣式，請考慮使用以下方法：

相反of:

li { color: blue }
li:odd { color:green }
li:even { color:red }

相反of:

li {
    color: black;
}
li:nth-child(odd) {
    color: #777;
}
li:nth-child(even) {
    color: blue;
}

使用：

透過替換:odd和 :even 為 :nth-child(odd) 和 :nth- child(even)，就達到了想要的交替著色效果。這是因為 :nth-child 可讓您根據元素在清單中的位置來選擇元素，確保將正確的樣式套用至每個項目。

以上是CSS 中的偶數與奇數列表項樣式：`li:odd`/`:even` 或 `:nth-child()`？的詳細內容。更多資訊請關注PHP中文網其他相關文章！