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

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

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

而不是：

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

使用:

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 可讓您根據元素在清單中的位置來選擇元素，確保將正確的樣式套用至每個項目。