CSS大部分选择符的浏览器兼容性

CSS选择符

元素选择符

1.      通配符 * ：IE6及更早浏览器并不支持通配选择符(*)，而是将它忽略了，所以也变相的能看到效果。

2.      元素选择符 E ：所有浏览器都支持。

3.      ID选择符 E#id ：所有浏览器都支持。

4.      类名选择符 E.class ：IE6版本不支持多类选择符，如：.a.b { }。其余所有浏览器都支持。

总结：除了通配符和类名选择符在IE6中有特殊的兼容性，其他的元素选择符被所有浏览器支持。

 

关系选择符

1.      包含选择符 E F：所有浏览器都支持。

2.      子元素选择符 E>F：在IE6中不支持，其余所有浏览器都支持。

3.      相邻选择符 E+F ：在IE6中不支持，其余所有浏览器都支持。

4.      兄弟选择符 E~F ：在IE6中不支持，其余所有浏览器都支持。另外，在Android Browser4.2.*及以下，伪元素:checked与该选择符一起使用会有一个bug。

总结：关系选择符中，除了包含选择符E F，其余选择符在IE6中都不被支持。

 

属性选择符

所有的属性选择符都不兼容IE6，其余所有浏览器都支持。

属性选择符包括：E[attr]   E[attr=”val”]  E[attr~=”val”]  E[attr|=”val”]  E[attr^=”val”]  E[attr$=”val”]  E[attr*=”val”]

 

伪类选择符

1.      E:link：所有浏览器都支持

2.      E:visited：所有浏览器都支持

3.      E:hover：所有浏览器都支持。但是，在IE6及更早浏览器中只支持a元素的:hover。IE7开始支持其他元素的:hover。

4.      E:active ：所有浏览器都支持。但是，在IE7及更早浏览器中只支持a元素的:active。IE8开始支持其他元素的:active。

5.      E:focus：IE6、7不支持，其余浏览器都支持。

6.      E:lang(fr)：匹配使用特殊语言的E元素。IE6、7不支持，其余浏览器都支持。

7.      E:first-child：IE6不支持，其余所有浏览器都支持。

8.      E:last-child：IE6-8不支持，其余所有浏览器都支持。

9.      E:only-child：IE6-8不支持，其余所有浏览器都支持。

10.   E:nth-child(n)：IE6-8不支持，其余所有浏览器都支持。

11.   E:nth-last-child(n)：IE6-8不支持，其余所有浏览器都支持。

12.   E:first-of-type：IE6-8不支持，其余所有浏览器都支持。

13.   E:last-of-type：IE6-8不支持，其余所有浏览器都支持。

14.   E:only-of-type：IE6-8不支持，其余所有浏览器都支持。

15.   E:nth-of-type(n)：IE6-8不支持，其余所有浏览器都支持。

16.   E:nth-last-of-type：IE6-8不支持，其余所有浏览器都支持。

17.   E:not(s)：不匹配含有s选择符的元素E。IE6-8不支持，其余所有浏览器都支持。

18.   E:root：匹配E元素在文档中的根元素，在HTML中，根元素永远是HTML。根据这个特性，可以做IE8的hack。IE6-8不支持，其余所有浏览器都支持。

19.   E:empty：IE6-8不支持，其余所有浏览器都支持。

20.   E:checked：IE6-8不支持，其余所有浏览器都支持。

21.   E:enabled：IE6-8不支持，其余所有浏览器都支持。

22.   E:disabled：IE6-8不支持，其余所有浏览器都支持。

23.   E:target：IE6-8不支持，其余所有浏览器都支持。

总结：伪类选择符在IE9及以上版本的浏览器中兼容性较好。状态类的伪类，:link和:visited在所有浏览器中都支持。:hover在IE6-中只支持a元素，:active在IE7-中只支持a元素。:focus和:lang(fr)在IE7-中不被支持。另外比较特殊的，:first-child在IE7+中被支持，其余相似的伪类均在IE9+中才被支持。

 

伪对象选择符

1.      E::first-letter：IE6+支持单冒号的写法:first-letter，IE7+支持双冒号写法::first-letter。其余所有浏览器都支持。

注意：在IE6中，:first-letter选择符不能紧挨着规则集大括号，需要留有空格或换行。在IE7/8中，本质上并不支持双冒号的写法，而是在解析中忽略一个冒号，以单冒号来解析，所以变相支持双冒号的写法。

2.      E:first-line：IE6+支持单冒号的写法:first-line，IE7+支持双冒号写法::first-line。

规则与::first-letter相同。

3.      E::before：IE6-7不支持，其余所有浏览器都支持。

注意：IE8本质上不支持双冒号的写法，而是在解析中忽略一个冒号，以单冒号来解析，所以变相支持双冒号的写法。另外，在firefox2.0-3.0中，不支持设置属性position,float,list-style-*和一些display值，firefox3.5开始取消这些限制。

4.      E::after：IE6-7不支持，其余所有浏览器都支持。

规则与E::before相同。

5.      E::placeholder：IE6-9、firefox2.0-3.6、safari3.1-4.0、IOS safari3.2-4.1版本不支持，其余所有版本都支持。

注意：写法上除了firefox是::[prefix]placeholder，其余浏览器都是::[prefix]input-placeholder，[prefix]指的是浏览器前缀。

6.      E::selection：IE6-8版本不支持，IE9+以及其他浏览器都支持。

注意：firefox需要加-moz-前缀，即 E::-moz-selection { } 。

总结：伪对象（伪元素）选择符大部分在IE9+版本能够得到支持，除了E::placeholder选择符在IE10+支持。另外，Firefox在伪对象选择符的支持上与其他浏览器有不少区别，需要单独注意。

 

以上，几乎所有的CSS选择器的兼容问题都有提到，参考资料来自CSS参考手册，网址http://www.css88.com/book/css/。如果有出入，希望能一起探讨，共同进步。

转载于:https://my.oschina.net/u/3472043/blog/903455