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

Gerade und ungerade Elemente mit CSS-Pseudoklassen gestalten

Frage:

Kann CSS Können Pseudoklassen verwendet werden, um gerade und ungerade Elemente in einer Liste auszuwählen und zu formatieren? Das beabsichtigte Ergebnis ist eine Liste mit wechselnden Farben, es wird jedoch eine Liste mit nur blauen Elementen generiert.

Beispiel:

Der folgende Code soll eine Liste erstellen mit abwechselnd grün und rot gefärbten Gegenständen, stattdessen sind es alle Gegenstände blau.

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

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

Antwort:

Um gerade und ungerade Elemente korrekt zu formatieren, sollte die Pseudoklasse :nth-child anstelle von verwendet werden: ungerade und :gerade:

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

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

Demo: [JSfiddle](http://jsfiddle.net/thirtydot/K3TuN/1323/)

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