Comment styliser des éléments avec :nth-child et :before dans IE8 ?

Limitations de compatibilité des navigateurs pour :nth-child et :before dans IE8

Internet Explorer 8 (IE8) présente un défi unique lorsqu'il s'agit à l'implémentation de pseudo-éléments CSS comme :nth-child et :before. Bien que ces sélecteurs soient largement pris en charge dans les navigateurs modernes, ils EXPOSENT des limitations dans IE8.

Un de ces problèmes survient lors de l'utilisation de :nth-child pour styliser des éléments spécifiques dans une liste. Comme le démontre l'extrait CSS, le sélecteur #nav-primary ul li:nth-child(1) a:after applique des styles au pseudo-élément after de la balise d'ancrage du premier élément de liste. Cependant, ce sélecteur ne fonctionne pas correctement dans IE8.

Approche alternative utilisant un combinateur frère adjacent

Pour contourner cette limitation, on peut utiliser le combinateur frère adjacent ( ) avec avec la pseudo-classe du premier enfant. Cette approche permet d'obtenir le même résultat en ciblant les frères et sœurs suivants du premier enfant à l'aide de la structure CSS suivante :

#nav-primary ul li:first-child a { ... }
#nav-primary ul li:first-child + li a { ... }
#nav-primary ul li:first-child + li + li a { ... }

Cette méthode émule efficacement le comportement de :nth-child(1), :nth-child( 2), et ainsi de suite. Cependant, il présente l'inconvénient de ne pas prendre en charge des variantes plus complexes de :nth-child() comme :nth-child(odd) ou :nth-child(4n 3).

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!