:nth-child(even/odd) をクラスで使用すると、交互の色がリセットされるのはなぜですか?

:nth-child(even/odd) クラスの問題のあるセレクター

「親」を持つリスト項目に交互の色を適用することを目的としています。 " クラス。ただし、色のリセットで問題が発生します。これを解決するには、次の点を考慮してください。

解決策:

CSS ルールは上から下に適用されるため、:nth-child(even/odd) セレクター以前のカラー設定がオーバーライドされる可能性があります。これに対処するには、一般的な兄弟コンビネータ (~) を使用して、非「親」要素の後の色を切り替えます。

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

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

説明:

• 最初の 2 つのルールは、「親」要素の交互の色を設定します。
• 後続のルールは ~ を使用します。非「親」要素の後の色を切り替えるコンビネーター。
• ルールの各セットは、より具体性を高めて色を交互に配置し、目的の動作を保証します。

制限事項:

この方法では、限られた数の非「親」要素に対して交互の色を実現できますが、このアプローチをどこまで拡張できるかには限界があります。

以上が:nth-child(even/odd) をクラスで使用すると、交互の色がリセットされるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。