如何使用 CSS 正確設定偶數和奇數列表項目的樣式？

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

CSS 偽類是一個強大的工具，用於根據HTML 元素的位置或狀態來選擇和樣式化HTML 元素。一個常見的用例是交替列表中元素的外觀。

最初，以下程式碼可能看起來是建立交替顏色清單的簡單方法：

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

但是，這將導致所有清單項目呈現藍色。這是因為當樣式聲明同時套用於元素及其偽類時，後者始終優先。在這種情況下，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;
}

第n 個子級偽類根據元素在父容器中的位置選擇元素，使我們能夠定位偶數和奇數元素具體來說。

這是即時預覽：

[程式碼片段]

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