Comment cibler des éléments spécifiques dans une liste à l'aide du nième enfant dans IE8 ?

Nth-Child et :before dans IE8

La possibilité d'utiliser nth-child pour cibler des éléments spécifiques dans une liste est un CSS puissant fonctionnalité qui n'est malheureusement pas prise en charge dans Internet Explorer 8 (IE8). Cela peut constituer un obstacle important lorsque vous travaillez avec des mises en page HTML complexes.

Cependant, il existe une solution de contournement qui peut être utilisée pour obtenir une fonctionnalité similaire dans IE8 à l'aide du combinateur frère adjacent ( ). Cette astuce consiste à cibler l'élément premier enfant puis à utiliser le sélecteur pour cibler les frères et sœurs suivants.

Par exemple, pour cibler le premier enfant d'une liste et lui donner une bordure rouge, nous pouvons utiliser le CSS suivant :

#nav-primary ul li:first-child a {
  border-top: 5px solid red;
}

De même, pour cibler le deuxième enfant et lui donner une bordure bleue, on peut utiliser :

#nav-primary ul li:first-child + li a {
  border-top: 5px solid blue;
}

Cette technique peut être utilisée pour cibler des éléments spécifiques en fonction de leur position dans une liste, même si :nth-child n'est pas pris en charge dans IE8. Cependant, il est important de noter que des variantes plus complexes de :nth-child, telles que :nth-child(odd) ou :nth-child(4n 3), ne peuvent pas être émulées à l'aide de cette méthode.

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!