CSS 疑似クラスは偶数および奇数のリスト項目を適切にスタイル設定できますか?

CSS 疑似クラスを使用した偶数要素と奇数要素のスタイリング

偶数リストと奇数リストのスタイルを区別するために CSS 疑似クラスを利用できますかアイテム?

期待されるもの結果:

次のコード スニペットに示すように、色が交互に表示されるリスト:

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

実際の結果:

色を交互にする代わりに、すべてのリスト項目が最終的に次のようになります。 blue.

解決策:

偶数要素と奇数要素を適切にスタイル設定するには、以下に示すように、n 番目の子疑似クラスを使用することをお勧めします。

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 中国語 Web サイトの他の関連記事を参照してください。