css后代选择器很好用，让我们的工作变的更方便。但有个麻烦，IE8及IE8以下对很多后代选择器并不兼容。
这六个后代选择器是比较长用到的：
这时会发现，IE9对这些后代选择器都兼容。IE8、IE7除了的 :first-child 是兼容的，其他五个都不兼容。
兼容：
<body>
<div>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
</div>
</body>
一、让第2个p元素变成“蓝色”字体.
一般是这样写 div p:nth-child(2) { color:blue; }
或者 div p:nth-of-type(2) { color:blue; }
或者 就是给第2个p元素加上class了。
要在IE7，IE8上进行兼容：
第一种方法： div>p:first-child+p { color:blue; }
第二种方法是用Jquery：
if (navigator.appName === ‘Microsoft Internet Explorer‘) { //判断是否是IE浏览器
if (navigator.userAgent.match(/Trident/i) && navigator.userAgent.match(/MSIE 8.0/i)) {
$(‘p:nth-child(2)‘).css(‘color‘,‘blue‘); //$(‘p:nth-of-type(2)‘).css(‘color‘,‘blue‘);
}
}
一、让第2个,第4个p元素变成“蓝色”字体.
一般是这样写 div p:nth-child(2n) { color:blue; }
或者 div p:nth-of-type(2n) { color:blue; }
要在IE7，IE8上进行兼容：df sasda
if (navigator.appName === ‘Microsoft Internet Explorer‘) { //判断是否是IE浏览器
if (navigator.userAgent.match(/Trident/i) && navigator.userAgent.match(/MSIE 8.0/i)) {
$(‘p:nth-child(2n)‘).css(‘color‘,‘blue‘);
//$(‘p:nth-of-type(2n)‘).css(‘color‘,‘blue‘);
}
}
:nth-child(odd)，:nth-child(odd) 奇数偶数，同样可以这样处理。
时间： 2024-08-12 07:53:57