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

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;
}

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!