CSS 偽類可以正確設定偶數和奇數列表項目的樣式嗎？

使用CSS 偽類設定偶數和奇數元素的樣式

是否可以利用CSS 偽類來區分偶數和奇數列表的樣式物件？

預期結果：

具有交替顏色的列表，如以下代碼片段所示：

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

實際結果：

所有列表項目最終都變成藍色，而不是交替顏色。

解：

要成功設定偶數和奇數元素的樣式，建議使用nth-child 偽類，如下：

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

此解決方案解決了交替顏色問題有效地滿足要求，如以下程式碼片段所示：

<ul>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
</ul>

以上是CSS 偽類可以正確設定偶數和奇數列表項目的樣式嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！