CSS を使用して偶数リスト項目と奇数リスト項目を適切にスタイルするにはどうすればよいですか?

CSS を使用した偶数要素と奇数要素のスタイル設定

CSS 疑似クラスは、位置や状態に基づいて HTML 要素を選択し、スタイル設定するための強力なツールです。一般的な使用例の 1 つは、リスト内の要素の外観を交互に変えることです。

最初は、次のコードは、交互の色のリストを作成する簡単な方法のように見えるかもしれません:

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

ただし、これにより、すべてのリスト項目が青色になります。これは、スタイル宣言が要素とその疑似クラスの両方に適用される場合、後者が常に優先されるためです。この場合、 li { color: blue } は li:odd { color:green } および li:even { color:red } をオーバーライドします。

色を正しく切り替えるには、 nth-child() を使用する必要があります。 pseudo-class:

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

n 番目の子疑似クラスは、親コンテナ内の位置に基づいて要素を選択するため、偶数要素と奇数要素をターゲットにすることができます。具体的には。

ライブ プレビューは次のとおりです:

[コード スニペット]

以上がCSS を使用して偶数リスト項目と奇数リスト項目を適切にスタイルするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。