Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie wende ich mit der „Parent'-Klasse mithilfe des n-ten-Kind-Selektors abwechselnde Farben auf Listenelemente an?

Linda Hamilton
Freigeben: 2024-11-09 04:21:02
Original
969 Leute haben es durchsucht

How to Apply Alternating Colors to List Items with the

N-ter-Kind-Selektor mit Klasse: Zurücksetzen von Farben überwinden

In einem Versuch, abwechselnde Farben auf Listenelemente mit der „übergeordneten“ Klasse anzuwenden Möglicherweise sind Sie auf das Problem gestoßen, dass die Farben nach bestimmten nicht übereinstimmenden Elementen zurückgesetzt werden. Dieses Problem entsteht aufgrund der Einschränkungen des :nth-child-Selektors.

Es gibt jedoch eine Problemumgehung mithilfe des allgemeinen Geschwisterkombinators (~). Indem Sie Regeln für Elemente definieren, die auf nicht übereinstimmende Elemente folgen, können Sie die Farben für nachfolgende übereinstimmende Elemente umschalten. So geht's:

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

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

/* Toggle colors again after second non-parent element */
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;
}
Nach dem Login kopieren

Bei diesem Ansatz dient jedes :not(.parent)-Element als „Reset“-Punkt, der die Farben nachfolgender Farbelemente umschaltet. Obwohl es hinsichtlich der Reichweite Einschränkungen gibt, ist es die beste Annäherung an alternierende Farben mit reinem CSS.

Das obige ist der detaillierte Inhalt vonWie wende ich mit der „Parent'-Klasse mithilfe des n-ten-Kind-Selektors abwechselnde Farben auf Listenelemente an?. 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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage