nth-childセレクターを使用して「親」クラスのリスト項目に交互の色を適用する方法は?-CSSチュートリアル-php.cn

nth-childセレクターを使用して「親」クラスのリスト項目に交互の色を適用する方法は?

Linda Hamilton

リリース： 2024-11-09 04:21:02

オリジナル

980 人が閲覧しました

How to Apply Alternating Colors to List Items with the

クラスを持つ N 番目の子セレクター: カラーのリセットを克服する

「親」クラスを持つリスト項目に交互の色を適用しようとしています、特定の不一致要素の後に色がリセットされる問題が発生した可能性があります。この問題は、:nth-child セレクターの制限により発生します。

ただし、一般的な兄弟コンビネータ (~) を使用する回避策が存在します。一致しない要素に続く要素のルールを定義することで、後続の一致する要素の色を切り替えることができます。その方法は次のとおりです:

.parent:nth-child(odd) {
    background-color: green;
}
.parent:nth-child(even) {
    background-color: red;
}

/* Toggle colors after first non-parent element */
li:not(.parent) ~ .parent:nth-child(odd) {
    background-color: red;
}
li:not(.parent) ~ .parent:nth-child(even) {
    background-color: green;
}

/* Toggle colors again after second non-parent element */
li:not(.parent) ~ li:not(.parent) ~ .parent:nth-child(odd) {
    background-color: green;
}
li:not(.parent) ~ li:not(.parent) ~ .parent:nth-child(even) {
    background-color: red;
}

ログイン後にコピー

このアプローチでは、各 :not(.parent) 要素が「リセット」ポイントとして機能し、色を切り替えます。どこまで拡張できるかという点では制限がありますが、純粋な CSS を使用した交互の色に最も近いものです。

以上がnth-childセレクターを使用して「親」クラスのリスト項目に交互の色を適用する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。