Les pseudo-classes CSS peuvent-elles styliser les éléments de liste pairs et impairs ?

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

Question :

Le CSS peut-il les pseudo-classes peuvent-elles être utilisées pour sélectionner et styliser les éléments pairs et impairs dans une liste ? Une liste avec des couleurs alternées est le résultat attendu, mais une liste avec uniquement des éléments bleus est générée.

Exemple :

Le code suivant devrait produire une liste avec une alternance d'éléments de couleur verte et rouge, mais à la place, tous les éléments sont bleu.

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

<ul>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
</ul>

Réponse :

Pour styliser correctement les éléments pairs et impairs, la pseudo-classe :nth-child doit être utilisée à la place de : impair et :pair :

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

<ul>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
</ul>

Démo : [JSfiddle](http://jsfiddle.net/thirtydot/K3TuN/1323/)

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!