Solution au problème d'incompatibilité du sélecteur CSS3 nth-child() dans IE8

1. Code

<strong><style><br/>ul{<a href="http://www.php.cn/wiki/953.html" target="_blank">list-style</a>: none}<br/>p ul li{<a href="http://www.php.cn/wiki/835.html" target="_blank">width</a>:100px;<a href="http://www.php.cn/wiki/836.html" target="_blank">height</a>:30px;b<a href="http://www.php.cn/wiki/1360.html" target="_blank">ord</a>er:#eee 1px solid;<a href="http://www.php.cn/wiki/919.html" target="_blank">float</a><a href="http://www.php.cn/wiki/974.html" target="_blank">:left</a>;}<br/>p ul li:nth-child(1){<a href="http://www.php.cn/wiki/892.html" target="_blank">background</a>:#f00;}<br/>p ul li:nth-child(3){background:#ccc;}<br/></style><br/>    <br/><p><br/>    <ul><br/>        <li>11</li><br/>        <li>22</li><br/>        <li>33</li><br/>    </ul><br/></p><br/></strong>

2. 🎜>


Comme le montre l'image ci-dessus, la couleur d'arrière-plan peut être affichée dans ie9 et supérieur


Problème : comme indiqué dans l'image ci-dessus, la couleur d'arrière-plan dans ie8 ne peut pas être affichée


Solution

<style>
ul{list-style: none}
p ul li{width:100px;height:30px;border:#eee 1px solid;float:left;}
p ul li:first-child{background:#ccc; }/*选取第一个li*/
p ul li:first-child+li+li{background:#ff0;}/*选取第三个li */
</style>
    
<p>
    <ul>
        <li>11</li>
        <li>22</li>
        <li>33</li>
    </ul>
</p>

4. . Autres sélecteurs CSS

:nth-of-type() selector - Le sélecteur correspond à chaque élément qui est le Nième élément enfant d'un type spécifique de l'élément parent
n peut être un. nombre, mot-clé ou formule. Contrairement à :nth-child(n), ce dernier n'a rien à voir avec le type. (Non non plus pris en charge dans IE8) Le sélecteur


:first-of-type
correspond à chaque élément qui est le premier enfant d'un type spécifique à partir de son élément parent. Astuce : équivalent à :nth-of-type(1). (Non non plus pris en charge dans IE8) Le sélecteur

:last-of-type
correspond à chaque élément qui est le dernier élément enfant d'un type spécifique qui est son élément parent. Indice : équivalent à :nth-last-of-type(1). (Non non plus pris en charge dans IE8)
 : le sélecteur only-of-type correspond à chaque élément qui est le seul élément enfant d'un type spécifique à partir de son élément parent. (Non non plus pris en charge dans IE8)

:nth-last-child(n) Le sélecteur correspond à chaque élément qui est le Nième enfant de son élément, quel que soit le type de l'élément, en comptant à partir du dernier enfant. n peut être un nombre, un mot-clé ou une formule. (IE8 n'est pas non plus pris en charge)
Astuce : veuillez vous référer au sélecteur :nth-last-of-type(), qui sélectionne le Nième élément enfant d'un type spécifié de l'élément parent, en comptant à partir du dernier élément enfant. Le sélecteur

:nth-last-of-type(n) correspond à chaque élément qui est le Nième enfant d'un type spécifique de l'élément parent, en commençant par le dernier enfant. n peut être un nombre, un mot-clé ou une formule. (IE8 n'est pas non plus pris en charge)
Astuce : consultez le sélecteur :nth-last-child(), qui sélectionne le Nième élément enfant de l'élément parent, quel que soit son type, en comptant à partir du dernier élément enfant. Le sélecteur

:last-child correspond à chaque élément qui est le dernier enfant de son élément parent. (IE8 n'est pas non plus pris en charge)
Conseils : p:last-child est équivalent à p:nth-last-child(1).

:le sélecteur first-child est utilisé pour sélectionner le sélecteur spécifié qui appartient au premier élément enfant de son élément parent. Pour :first-child dans IE8 et les navigateurs antérieurs, une déclaration est requise.

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!