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

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

Les pseudo-classes CSS peuvent-elles être utilisées pour différencier le style des listes paires et impaires articles ?

Les articles attendus Résultat :

Une liste avec des couleurs alternées, comme le montre l'extrait de code suivant :

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

Le résultat réel :

Au lieu d'alterner les couleurs, tous les éléments de la liste finissent par être bleus.

Le Solution :

Pour réussir à styliser les éléments pairs et impairs, il est recommandé d'utiliser la pseudo-classe nième enfant, comme démontré ci-dessous :

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

Cette solution concerne la couleur alternée exigence de manière efficace, comme le montre l'extrait de code suivant :

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

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!