Heim > Web-Frontend > CSS-Tutorial > Können CSS-Pseudoklassen gerade und ungerade Listenelemente formatieren?

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

DDD
Freigeben: 2024-12-23 11:35:33
Original
450 Leute haben es durchsucht

Can CSS Pseudo-classes Style Even and Odd List Items?

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 }
Nach dem Login kopieren
<ul>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
</ul>
Nach dem Login kopieren
Nach dem Login kopieren

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;
}
Nach dem Login kopieren
<ul>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
</ul>
Nach dem Login kopieren
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage