Maison > interface Web > tutoriel CSS > Les pseudo-classes CSS peuvent-elles styliser les éléments de liste pairs et impairs ?

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

DDD
Libérer: 2024-12-23 11:35:33
original
452 Les gens l'ont consulté

Can CSS Pseudo-classes Style Even and Odd List Items?

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 }
Copier après la connexion
<ul>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
</ul>
Copier après la connexion
Copier après la connexion

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;
}
Copier après la connexion
<ul>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
</ul>
Copier après la connexion
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal