Wie schalte ich Farben mit :nth-child(even/odd)-Selektoren um, wenn nicht-übergeordnete Elemente vorhanden sind?

n-tes Kind (gerade/ungerade) Selektor mit Klassenproblem

Bei der Implementierung von: n-tes Kind (ungerade/gerade) Selektoren für a Bei einer klassenbasierten Liste kommt es häufig zu Problemen beim Zurücksetzen der Farbe. Im bereitgestellten Beispiel sollten Elemente die Farben des Textes erben, wurden aber stattdessen zurückgesetzt.

Dieses Problem entsteht, weil:nth-child(even/odd)-Selektoren von Natur aus auf alle untergeordneten Elemente abzielen, unabhängig davon Klasse oder andere Attribute. Um dieses Problem anzugehen, kann der allgemeine Geschwisterkombinator ~ verwendet werden.

Das Konzept beinhaltet das Umschalten der Farben nachfolgender .parent-Elemente nach dem Auftreffen auf Nicht-.parent-Elemente. Hier ist eine Aufschlüsselung des 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;
}

Diese Lösung ermöglicht das Umschalten zwischen Farben, auch wenn nicht-.parent-Elemente vorhanden sind. Es ist jedoch wichtig zu beachten, dass dieser Ansatz Einschränkungen aufweist und nur für eine begrenzte Anzahl ausgeschlossener Elemente verwendet werden sollte.

Durch die Implementierung dieser Strategie können Sie :nth-child(odd/even)-Selektoren effektiv anwenden Erstellen Sie klassenbasierte Listen und erreichen Sie das gewünschte alternierende Farbschema, um sicherzustellen, dass die Listenelemente die Farben ihres Textinhalts erben.

Das obige ist der detaillierte Inhalt vonWie schalte ich Farben mit :nth-child(even/odd)-Selektoren um, wenn nicht-übergeordnete Elemente vorhanden sind?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!