Comment styliser le dernier élément de la liste en CSS tout en conservant la compatibilité entre navigateurs ?

Application de CSS au dernier élément de la liste avec :last-child

Pour tenter de styliser uniquement le dernier élément de la liste (

#refundReasonMenu #nav li:last-child {
    border-bottom: 1px solid #b5b5b5;
}

Cependant, cette approche ne parvient pas à sélectionner le dernier élément de la liste. Le problème provient de la prise en charge limitée du navigateur pour la pseudoclasse :last-child.

Problèmes de compatibilité du navigateur

Malgré son utilisation répandue dans les navigateurs modernes, :last-child n'est pas universellement pris en charge. Les versions d'Internet Explorer antérieures à 9 et les versions de Safari antérieures à 3.2 ne le supportent notamment pas.

Solution alternative

Pour résoudre ce problème de compatibilité, il est conseillé d'ajouter explicitement un last-child ou une classe similaire à l'élément de liste souhaité et appliquez plutôt des styles à li.last-child. Cette méthode garantit la compatibilité entre différents navigateurs :

ul#nav li.last-child {
    border-bottom: 1px solid #b5b5b5;
}

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!