為什麼我的 CSS :odd 和 :even 選擇器沒有如預期運作？

設定偶數和奇數元素的樣式

CSS 偽類 :odd 和 :even 可讓您將樣式套用於清單中元素的奇數和偶數實例。但是，將這些偽類與基本樣式規則結合使用時會出現問題，導致意外結果。

例如，考慮以下CSS 和HTML 代碼：

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

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

您可能期望這會產生一個交替顏色的列表，但相反，所有列表項都是blue.

解決方案

要解決這個問題，您可以使用nth-child 偽類來代替:odd 和:even。 nth-child 的語法如下：

li:nth-child(n) {...}

其中 n 表示元素在其父元素中的位置。

要設定奇數和偶數列表項目的樣式，可以使用以下指令CSS:

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>

這將產生一個黑名單項目列表，其他所有項目在灰色(# 777) 和藍色。

以上是為什麼我的 CSS :odd 和 :even 選擇器沒有如預期運作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！