Können CSS-Pseudoklassen gerade und ungerade Listenelemente richtig formatieren?

Gerade und ungerade Elemente mit CSS-Pseudoklassen formatieren

Können CSS-Pseudoklassen verwendet werden, um das Styling gerader und ungerader Listen zu unterscheiden? Elemente?

Das erwartete Ergebnis:

Eine Liste mit abwechselnden Farben, wie im folgenden Codeausschnitt zu sehen ist:

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

Das tatsächliche Ergebnis:

Anstelle abwechselnder Farben sind alle Listenelemente am Ende blau.

Die Lösung:

Um gerade und ungerade Elemente erfolgreich zu stylen, geht es darum Es wird empfohlen, die n-te-Kind-Pseudoklasse zu verwenden, wie unten gezeigt:

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

Diese Lösung geht effektiv auf die alternierende Farbanforderung ein, wie im folgenden Codeausschnitt dargestellt:

<ul>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
</ul>

Das obige ist der detaillierte Inhalt vonKönnen CSS-Pseudoklassen gerade und ungerade Listenelemente richtig formatieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!