親以外の要素が存在する場合に:nth-child(even/odd) セレクターを使用して色を切り替える方法

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

:nth-child(odd/even) セレクターを実装する場合クラスベースのリストでは、色のリセットの問題がよく発生します。提供された例では、要素はテキストの色を継承することになっていましたが、代わりにリセットされていました。

この問題は、nth-child(even/odd) セレクターが本質的にすべての子要素をターゲットにしているために発生します。クラスまたは他の属性。この問題に対処するには、~ 一般的な兄弟コンビネータを使用できます。

この概念には、非 .parent 要素に遭遇した後、後続の .parent 要素の色を切り替えることが含まれます。 CSS の内訳は次のとおりです。

/* Initial even/odd coloring */
.parent:nth-child(odd) {
    background-color: green;
}

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

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

li:not(.parent) ~ .parent:nth-child(even) {
    background-color: green;
}

/* Toggle colors after second non-.parent */
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;
}

このソリューションでは、.parent 以外の要素が存在する場合でも、色を切り替えることができます。ただし、このアプローチには制限があり、限られた数の除外要素にのみ使用する必要があることに注意することが重要です。

この戦略を実装すると、:nth-child(odd/even) セレクターを効果的に適用できます。クラスベースのリストを作成し、希望する交互のカラー スキームを実現し、リスト項目がそのテキスト コンテンツの色を継承するようにします。

以上が親以外の要素が存在する場合に:nth-child(even/odd) セレクターを使用して色を切り替える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。