Style d'élément de liste pair ou impair en CSS : `li:odd`/`:even` ou `:nth-child()` ?

Style des éléments de liste pairs et impairs : pseudo-classes par rapport au nième enfant

Lorsque vous essayez d'obtenir des couleurs alternées pour les éléments de liste à l'aide de pseudo-classes CSS, vous pouvez rencontrer des problèmes. Bien qu'il puisse sembler logique d'utiliser li:odd et li:even à cette fin, le comportement peut être imprévisible.

Pour styliser efficacement les instances paires et impaires d'éléments de liste, envisagez d'utiliser l'approche suivante :

Au lieu de cela de :

li { color: blue }
li:odd { color:green }
li:even { color:red }

Utiliser :

li {
    color: black;
}
li:nth-child(odd) {
    color: #777;
}
li:nth-child(even) {
    color: blue;
}

En remplaçant :impair et :even par :nth-child(impair) et :nth- enfant(même), l'effet de coloration alternée souhaité est obtenu. En effet, :nth-child vous permet de sélectionner des éléments en fonction de leur position dans la liste, garantissant ainsi que le style correct est appliqué à chaque élément.

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!