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.

解決策

これを解決するには、:odd と :even の代わりに nth-child 疑似クラスを使用できます。 n 番目の子の構文は次のとおりです。

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