Gerades vs. ungerades Listenelement-Styling in CSS: `li:odd`/`:even` oder `:nth-child()`?

Styling von geraden und ungeraden Listenelementen: Pseudoklassen vs. n-tes Kind

Wenn Sie versuchen, mithilfe von CSS-Pseudoklassen abwechselnde Farben für Listenelemente zu erreichen, kann dies der Fall sein auf Probleme stoßen. Obwohl es logisch erscheinen mag, für diesen Zweck li:odd und li:even zu verwenden, kann das Verhalten unvorhersehbar sein.

Um gerade und ungerade Instanzen von Listenelementen effektiv zu formatieren, sollten Sie den folgenden Ansatz in Betracht ziehen:

Stattdessen von:

li { color: blue }
li:odd { color:green }
li:even { color:red }

Verwendung:

li {
    color: black;
}
li:nth-child(odd) {
    color: #777;
}
li:nth-child(even) {
    color: blue;
}

Durch Ersetzen von :odd und :even durch :nth-child(odd) und :nth- Kind (auch) wird der gewünschte alternierende Farbeffekt erzielt. Dies liegt daran, dass Sie mit :nth-child Elemente basierend auf ihrer Position in der Liste auswählen können, um sicherzustellen, dass auf jedes Element der richtige Stil angewendet wird.

Das obige ist der detaillierte Inhalt vonGerades vs. ungerades Listenelement-Styling in CSS: `li:odd`/`:even` oder `:nth-child()`?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!