Warum werden meine alternierenden Farben zurückgesetzt, wenn ich :nth-child(even/odd) mit einer Klasse verwende?

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

Sie möchten abwechselnde Farben anwenden, um Elemente mit dem „Elternteil“ aufzulisten " Klasse. Beim Zurücksetzen der Farben treten jedoch Probleme auf. Um dieses Problem zu lösen, berücksichtigen Sie Folgendes:

Lösung:

Da CSS-Regeln von oben nach unten angewendet werden, sind die :nth-child(even/odd)-Selektoren überschreibt möglicherweise frühere Farbeinstellungen. Um dieses Problem zu beheben, verwenden Sie den allgemeinen Geschwisterkombinator (~), um die Farben nach nicht „übergeordneten“ Elementen umzuschalten:

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

Erklärung:

• Die Die ersten beiden Regeln legen die abwechselnden Farben für „übergeordnete“ Elemente fest.
• Nachfolgende Regeln verwenden den ~-Kombinator, um die Farben nach nicht „übergeordneten“ Elementen umzuschalten.
• Jeder Regelsatz wechselt die Farben mit erhöhte Spezifität, wodurch das gewünschte Verhalten sichergestellt wird.

Einschränkungen:

Während diese Methode es Ihnen ermöglicht, abwechselnde Farben für eine begrenzte Anzahl von Nicht-"Eltern" zu erreichen Elemente gibt es eine Grenze, wie weit Sie diesen Ansatz erweitern können.

Das obige ist der detaillierte Inhalt vonWarum werden meine alternierenden Farben zurückgesetzt, wenn ich :nth-child(even/odd) mit einer Klasse verwende?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!