Comment basculer les couleurs avec les sélecteurs :nth-child (pair/impair) lorsque des éléments non parents existent ?

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

Lors de l'implémentation de sélecteurs :ntième enfant (impair/pair) pour un liste basée sur les classes, il est courant de rencontrer des problèmes de réinitialisation des couleurs. Dans l'exemple fourni, les éléments étaient censés hériter des couleurs du texte, mais ils étaient réinitialisés à la place.

Ce problème se pose car : les sélecteurs nth-child (pair/impair) ciblent intrinsèquement tous les éléments enfants, indépendamment de classe ou d’autres attributs. Pour résoudre ce problème, le combinateur général de frères et sœurs ~ peut être utilisé.

Le concept consiste à basculer les couleurs des éléments .parent suivants après avoir rencontré des éléments non-.parent. Voici une description du CSS :

/* Initial even/odd coloring */
.parent:nth-child(odd) {
    background-color: green;
}

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

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

li:not(.parent) ~ .parent:nth-child(even) {
    background-color: green;
}

/* Toggle colors after second non-.parent */
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 solution permet de basculer entre les couleurs même lorsque des éléments non-.parent sont présents. Cependant, il est crucial de noter que cette approche a des limites et ne doit être utilisée que pour un nombre limité d'éléments exclus.

En mettant en œuvre cette stratégie, vous pouvez appliquer efficacement les sélecteurs :nth-child(impair/pair) à listes basées sur les classes et obtenez le jeu de couleurs alternées souhaité, en garantissant que les éléments de la liste héritent des couleurs de leur contenu textuel.

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!