前言:css伪类选择器很好用,让我们的工作变的更方便。但有个麻烦,IE8及IE8以下对很多伪类选择器并不兼容。
这13个伪类选择器是比较长用到的:
这时会发现,IE9对这些伪类选择器都能兼容。IE8、IE7对 :first-child,:hover是兼容的,IE8对:focus是兼容的,而其他IE7,IE8并不兼容。
一、css兼容
<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上进行兼容:
<body>
<style>
div p:first-child+p { color:blue; }
</style>
<div>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
</div>
</body>
这时就可以在IE7,IE8上进行兼容了
同样的,如果是要让第三p标签color变蓝色,可以这样写
<body>
<style>
div p:first-child+p+p { color:blue; }
</style>
<div>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
</div>
</body>
二、通过jquery兼容(这里的jquery要用2.0.0以下的,不然会报错)
①让第二个p标签变蓝色的话,可以用jquery获取到第二个p元素标签
if (navigator.appName === 'Microsoft Internet Explorer') { //判断是否是IE浏览器
if (navigator.userAgent.match(/Trident/i) && navigator.userAgent.match(/MSIE 7.0/i)) { //判断是否是IE7
$('p:nth-child(2)').css('color','blue');
//$('p:nth-of-type(2)').css('color','blue');
}else if(navigator.userAgent.match(/Trident/i) && navigator.userAgent.match(/MSIE 8.0/i)){ //判断是否是IE8
$('p:nth-child(2)').css('color','blue');
//$('p:nth-of-type(2)').css('color','blue');
}
}
②如果是让第二个,第四个p标签变蓝色的话
if (navigator.appName === 'Microsoft Internet Explorer') { //判断是否是IE浏览器
if (navigator.userAgent.match(/Trident/i) && navigator.userAgent.match(/MSIE 7.0/i)) { //判断是否是IE7
$('p:nth-child(2n)').css('color','blue');
//$('p:nth-of-type(2n)').css('color','blue');
}else if(navigator.userAgent.match(/Trident/i) && navigator.userAgent.match(/MSIE 8.0/i)){ //判断是否是IE8
$('p:nth-child(2n)').css('color','blue');
//$('p:nth-of-type(2n)').css('color','blue');
}
}
以此类推,以上所有的伪元素标签都可以通过该方法进行兼容
三、tip
<body>
<style>
div p:first-child { color:blue; }
div .active { color:red; }
</style>
<div>
<p class="active">aaaa</p>
<p >aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
</div>
</body>
运行代码发现,第一个p标签还是红色的,说明:伪类选择器的优先级比class选择器的优先级还要高。