「.parent」以外の要素が介在する「.parent」リスト項目の背景色を変更する方法は?-CSSチュートリアル-php.cn

「.parent」以外の要素が介在する「.parent」リスト項目の背景色を変更する方法は?

Mary-Kate Olsen

リリース： 2024-11-06 22:59:03

オリジナル

697 人が閲覧しました

How to Alternate Background Colors for

クラスで :nth-child(even/odd) セレクターを使用する:

リスト項目に交互の背景色を適用したいとします。「.parent」クラス。ただし、現在色はリセットされています。

問題:
リスト内に「.parent」以外の要素が存在するため、「.parent」要素が期待どおりに動作しません。 .

解決策:
通常、:nth-child セレクターのみを使用して目的の動作を実現することはできません。ただし、一般的な兄弟コンビネータ (~) を使用することもできます。

奇数の ".parent" 要素をすべて選択し、"緑色" を適用します。
For each non-"。

CSS コード:

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

/* After the first non-.parent, toggle colors */
li:not(.parent) ~ .parent:nth-child(odd) {
    background-color: red;
}
li:not(.parent) ~ .parent:nth-child(even) {
    background-color: green;
}

/* After the second non-.parent, toggle again */
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」要素に対して、目的の交互パターンを実現します。

以上が「.parent」以外の要素が介在する「.parent」リスト項目の背景色を変更する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。