Wie kann ich gerade und ungerade Listenelemente mit CSS richtig formatieren?

Gerade und ungerade Elemente mit CSS gestalten

CSS-Pseudoklassen sind ein leistungsstarkes Werkzeug zum Auswählen und Gestalten von HTML-Elementen basierend auf ihrer Position oder ihrem Zustand. Ein häufiger Anwendungsfall ist das abwechselnde Erscheinungsbild von Elementen innerhalb einer Liste.

Der folgende Code scheint zunächst eine einfache Möglichkeit zu sein, eine Liste mit abwechselnden Farben zu erstellen:

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

Allerdings Dies führt dazu, dass alle Listenelemente blau sind. Dies liegt daran, dass, wenn eine Stildeklaration sowohl auf ein Element als auch auf seine Pseudoklasse angewendet wird, letztere immer Vorrang hat. In diesem Fall überschreibt li { color: blue } li:odd { color:green } und li:even { color:red }.

Um die Farben korrekt abzuwechseln, müssen wir nth-child() verwenden. Pseudoklasse:

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

Die n-te untergeordnete Pseudoklasse wählt Elemente basierend auf ihrer Position innerhalb ihres übergeordneten Containers aus, sodass wir auf gerade und ungerade Elemente abzielen können speziell.

Hier ist eine Live-Vorschau:

[Code-Snippet]

Das obige ist der detaillierte Inhalt vonWie kann ich gerade und ungerade Listenelemente mit CSS richtig formatieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!