Wie kann man Hintergrundfarben für „.parent“-Listenelemente mit dazwischen liegenden Nicht-.parent“-Elementen abwechseln?

Verwenden des :nth-child(even/odd) Selector with Class:

Sie möchten abwechselnde Hintergrundfarben anwenden, um Elemente mit dem aufzulisten „.parent“-Klasse. Allerdings werden die Farben derzeit zurückgesetzt.

Problem:
Die „.parent“-Elemente verhalten sich nicht wie erwartet, da in der Liste Nicht-.parent“-Elemente vorhanden sind .

Lösung:
Normalerweise kann das gewünschte Verhalten nicht nur mit dem :nth-child-Selektor erreicht werden. Sie können jedoch den allgemeinen Geschwisterkombinator (~) verwenden:

1. Wählen Sie alle ungeraden „.parent“-Elemente aus und wenden Sie die „grüne“ Farbe an.
2. Für jedes Nicht-“. parent“-Element, schalten Sie die Farben der folgenden „.parent“-Elemente mit ~.

CSS um Code:

.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;
}

Dieser Ansatz wechselt die Farben für eine begrenzte Anzahl „ausgeschlossener“ Nicht-.parent-Elemente und erzielt so das gewünschte Wechselmuster.

Das obige ist der detaillierte Inhalt vonWie kann man Hintergrundfarben für „.parent“-Listenelemente mit dazwischen liegenden Nicht-.parent“-Elementen abwechseln?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!