Comment appliquer des couleurs alternées aux éléments de liste avec la classe « Parent » à l'aide du sélecteur de nième enfant ?

Sélecteur de Nième enfant avec classe : surmonter la réinitialisation des couleurs

Dans le but d'appliquer des couleurs alternées pour répertorier les éléments avec la classe "parent" , vous avez peut-être rencontré le problème de réinitialisation des couleurs après certains éléments qui ne correspondent pas. Ce problème survient en raison des limitations du sélecteur :nth-child.

Cependant, une solution de contournement existe en utilisant le combinateur général de frères et sœurs (~). En définissant des règles pour les éléments qui suivent ceux qui ne correspondent pas, vous pouvez basculer les couleurs des éléments correspondants suivants. Voici comment :

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

Avec cette approche, chaque élément :not(.parent) sert de point de "réinitialisation", basculant les couleurs des éléments suivants. Bien qu'il ait des limites en termes d'étendue, il s'agit de l'approximation la plus proche de l'alternance de couleurs utilisant du CSS pur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!