Comment alterner les couleurs d'arrière-plan pour les éléments de liste « .parent » avec des éléments intermédiaires non-.parent » ?

Utilisation du sélecteur :nth-child (pair/impair) avec classe :

Vous souhaitez appliquer des couleurs d'arrière-plan alternées pour répertorier les éléments avec le Classe ".parent". Cependant, les couleurs sont actuellement réinitialisées.

Problème :
Les éléments ".parent" ne se comportent pas comme prévu en raison de la présence d'éléments non-".parent" dans la liste .

Solution :
Normalement, le comportement souhaité ne peut pas être obtenu en utilisant uniquement le sélecteur :ntième enfant. Cependant, vous pouvez utiliser le combinateur général de frères et sœurs (~) :

1. Sélectionnez tous les éléments ".parent" impairs et appliquez la couleur "verte".
2. Pour chaque non-". parent", basculez les couleurs des éléments ".parent" suivants à l'aide de ~.

Code CSS :

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

Cette approche alterne les couleurs pour un nombre limité d'éléments non ".parents" "exclus", obtenant le motif alterné souhaité.

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!