CSS での偶数と奇数のリスト項目のスタイリング: `li:odd`/`:even` または `:nth-child()`?

偶数および奇数のリスト要素のスタイリング: 擬似クラスと nth-child

CSS 擬似クラスを使用してリスト項目の色を交互に変更しようとする場合、問題に遭遇します。この目的で li:odd と li:even を使用するのは論理的であるように思えるかもしれませんが、動作は予測できない場合があります。

リスト項目の偶数インスタンスと奇数インスタンスを効果的にスタイル設定するには、次のアプローチの使用を検討してください。

代わりにの:

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

使用:

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

:odd と :even を :nth-child(odd) と :nth- に置き換えます。 child(even) の場合、望ましい交互のカラーリング効果が達成されます。これは、:nth-child を使用すると、リスト内の位置に基づいて要素を選択できるため、各項目に正しいスタイルが適用されることが保証されます。

以上がCSS での偶数と奇数のリスト項目のスタイリング: `li:odd`/`:even` または `:nth-child()`?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。