Comment puis-je styliser correctement les éléments de liste pairs et impairs à l'aide de CSS ?

Style des éléments pairs et impairs à l'aide de CSS

Les pseudo-classes CSS sont un outil puissant pour sélectionner et styliser les éléments HTML en fonction de leur position ou de leur état. Un cas d'utilisation courant consiste à alterner l'apparence des éléments dans une liste.

Au départ, le code suivant peut sembler un moyen simple de créer une liste de couleurs alternées :

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

Cependant, cela aura pour conséquence que tous les éléments de la liste seront bleus. En effet, lorsqu'une déclaration de style est appliquée à la fois à un élément et à sa pseudo-classe, cette dernière est toujours prioritaire. Dans ce cas, li { color: blue } remplace li:odd { color:green } et li:even { color:red }.

Pour alterner correctement les couleurs, nous devons utiliser le nth-child() pseudo-class :

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

La pseudo-classe du nième enfant sélectionne les éléments en fonction de leur position dans leur conteneur parent, nous permettant de cibler les éléments pairs et impairs plus précisément.

Voici un aperçu en direct :

[Code Snippet]

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!