Pourquoi mon sélecteur CSS :odd et :even ne fonctionne-t-il pas comme prévu ?

Style des éléments pairs et impairs

Les pseudo-classes CSS :odd et :even vous permettent d'appliquer des styles aux instances paires et impaires d'éléments dans une liste. Cependant, un problème survient lors de l'utilisation de ces pseudo-classes en conjonction avec une règle de style de base, conduisant à des résultats inattendus.

Par exemple, considérons le code CSS et HTML suivant :

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>

Vous pourriez vous attendre à ce que cela produise une liste de couleurs alternées, mais à la place, tous les éléments de la liste sont bleus.

Solution

Pour pour résoudre ce problème, vous pouvez utiliser la pseudo-classe nième enfant au lieu de :odd et :even. La syntaxe du nième enfant est la suivante :

li:nth-child(n) {...}

où n représente la position de l'élément au sein de son parent.

Pour styliser les éléments de liste impairs et pairs, vous pouvez utiliser ce qui suit CSS :

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>

Cela entraînera une liste d'éléments de la liste noire, tous les autres éléments alternant entre le gris (#777) et bleu.

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!