Pourquoi mes couleurs alternées sont-elles réinitialisées lors de l'utilisation de :nth-child (pair/impair) avec une classe ?

 : sélecteur de nième enfant (pair/impair) avec problème de classe

Vous souhaitez appliquer des couleurs alternées pour répertorier les éléments avec le "parent " classe. Cependant, vous rencontrez des problèmes avec la réinitialisation des couleurs. Pour résoudre ce problème, considérez ce qui suit :

Solution :

Étant donné que les règles CSS sont appliquées de haut en bas, les sélecteurs :nth-child(pair/impair) remplacera potentiellement les paramètres de couleur précédents. Pour résoudre ce problème, utilisez le combinateur général de frères et sœurs (~) pour basculer les couleurs après les éléments non « parents » :

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

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

Explication :

• Le les deux premières règles définissent les couleurs alternées pour les éléments « parents ».
• Les règles suivantes utilisent le combinateur ~ pour basculer les couleurs après les éléments non « parents ».
• Chaque ensemble de règles alterne les couleurs avec spécificité accrue, garantissant le comportement souhaité.

Limitations :

Bien que cette méthode permette d'obtenir des couleurs alternées pour un nombre limité de non-"parents" éléments, il y a une limite à la mesure dans laquelle vous pouvez étendre cette approche.

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!