Wie kann ich Elementfarben mit :nth-child abwechseln, wenn nicht übereinstimmende Elemente übersprungen werden?

:nth-child(even/odd) Selector with Class

In CSS wählt der :nth-child(n) Selector Elemente aus das ist das n-te Kind ihrer Eltern. Wenn n ungerade ist, wählt der Selektor für das n-te Kind (ungerade) ungerade Elemente aus, und wenn n gerade ist, wählt der Selektor für das n-te Kind (gerade) gerade Elemente aus.

Bedenken Sie das folgende HTML-Markup , wo wir :nth-child-Selektoren anwenden wollen, um Elemente mit der Klasse „parent“ aufzulisten:

<ul>
    <li class="parent">green</li>
    <li class="parent">red</li>
    <li>ho ho ho</li>
    <li class="parent">green</li>
    <li class="parent">red</li>
</ul>

Anwenden des folgenden CSS auf den HTML-Code oben:

.parent:nth-child(odd) {
    background-color: green;
}

.parent:nth-child(even) {
    background-color: red;
}

Unerwartet, Die Farbe der Elemente wird nach dem ersten Nicht-Parent-Element zurückgesetzt. Dies liegt daran, dass der :nth-child-Selektor für alle Elemente in der Liste gilt, nicht nur für diejenigen mit der Klasse „parent“.

Um das gewünschte Verhalten zu erreichen, müssen wir den allgemeinen Geschwisterkombinator (~) verwenden. , wodurch ein Element ausgewählt wird, das einem anderen Element im DOM-Baum vorausgeht. Durch die Kombination mit dem :nth-child-Selektor können wir die Farben von „.parent“-Elementen jedes Mal ändern, wenn ein Nicht-.parent-Element angetroffen wird:

.parent:nth-child(odd) {
    background-color: green;
}
.parent:nth-child(even) {
    background-color: red;
}

/* after the first non-.parent, toggle colors */
li:not(.parent) ~ .parent:nth-child(odd) {
    background-color: red;
}
li:not(.parent) ~ .parent:nth-child(even) {
    background-color: green;
}

/* after the second non-.parent, toggle again */
li:not(.parent) ~ li:not(.parent) ~ .parent:nth-child(odd) {
    background-color: green;
}
li:not(.parent) ~ li:not(.parent) ~ .parent:nth-child(even) {
    background-color: red;
}

Dieser Ansatz ermöglicht es uns, die Farben zu ändern von „.parent“-Elementen, während Nicht-.parent-Elemente übersprungen werden. Allerdings ist die Anzahl der Nicht-.parent-Elemente, die der :nth-child-Selektor vorausschauen kann, begrenzt, sodass diese Technik für sehr lange Listen mit vielen alternierenden Klassen möglicherweise nicht praktikabel ist.

Das obige ist der detaillierte Inhalt vonWie kann ich Elementfarben mit :nth-child abwechseln, wenn nicht übereinstimmende Elemente übersprungen werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!