Warum funktioniert mein CSS-Selektor :odd und :even nicht wie erwartet?

Gerade und ungerade Elemente formatieren

Mit den CSS-Pseudoklassen :odd und :even können Sie Stile auf ungerade und gerade Instanzen von Elementen in einer Liste anwenden. Bei der Verwendung dieser Pseudoklassen in Verbindung mit einer Basisstilregel tritt jedoch ein Problem auf, das zu unerwarteten Ergebnissen führt.

Bedenken Sie beispielsweise den folgenden CSS- und HTML-Code:

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>

Vielleicht erwarten Sie, dass dadurch eine Liste mit abwechselnden Farben erstellt wird, aber stattdessen sind alle Listenelemente blau.

Lösung

Zu lösen In diesem Fall können Sie die n-te-Kind-Pseudoklasse anstelle von :odd und :even verwenden. Die Syntax für das n-te Kind lautet wie folgt:

li:nth-child(n) {...}

wobei n die Position des Elements innerhalb seines übergeordneten Elements darstellt.

Um ungerade und gerade Listenelemente zu formatieren, können Sie Folgendes verwenden CSS:

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>

Dies führt zu einer Liste mit schwarzen Listenelementen, wobei jedes andere Element abwechselnd grau (#777) und ist blau.

Das obige ist der detaillierte Inhalt vonWarum funktioniert mein CSS-Selektor :odd und :even nicht wie erwartet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!