CSS选择器的浏览器兼容

2014-02-05 · 9 min read

测试环境:HTML5 DOCTYPE,Chrome 33.0.1750.117 m,FireFox 27.0.1,Internet Explorer 11.0.9600.16428IS,IETester v0.4.11。结果直接见下表:

选择器例子CSS兼容性
element>elementdiv>p2chrome,firefox,ie7+
element+elementdiv+p2chrome,firefox,ie7+
[attribute]a[target]2chrome,firefox,ie7+
[attribute=value]a[target=_blank]2chrome,firefox,ie7+
[attribute~=value]a[class~=keenwon]2chrome,firefox,ie7+
[attribute=value][lang|=en]2chrome,firefox,ie7+
:linka:link2所有
:visiteda:visited2所有
:activea:active2所有
:hovera:hover2所有
:focusinput:focus2chrome,firefox,ie7+
:first-letterp:first-letter2所有
:first-linep:first-line2所有
:first-childp:first-child2chrome,firefox,ie7+
:beforep:before2chrome,firefox,ie8+
:afterp:after2chrome,firefox,ie8+
:lang(language)p:lang(it)2chrome,firefox,ie8+
element1~element2p~ul3chrome,firefox,ie7+
[attribute^=value]img[src^="https"]3chrome,firefox,ie7+
[attribute$=value]img[src$=".pdf"]3chrome,firefox,ie7+
[attribute*=value]img[src*="abc"]3chrome,firefox,ie7+
:first-of-typep:first-of-type3chrome,firefox,ie9+
:last-of-typep:last-of-type3chrome,firefox,ie9+
:only-of-typep:only-of-type3chrome,firefox,ie9+
:only-childp:only-child3chrome,firefox,ie9+
:nth-child(n)p:nth-child(2)3chrome,firefox,ie9+
:nth-last-child(n)p:nth-last-child(2)3chrome,firefox,ie9+
:nth-of-type(n)p:nth-of-type(2)3chrome,firefox,ie9+
:nth-last-of-type(n)p:nth-last-of-type(2)3chrome,firefox,ie9+
:last-childp:last-child3chrome,firefox,ie9+
:root:root3chrome,firefox,ie9+
:emptyp:empty3chrome,firefox,ie9+
:target#news:target3chrome,firefox,ie9+
:enabledinput:enabled3chrome,firefox,ie9+
:disabledinput:disabled3chrome,firefox,ie9+
:checkedinput:checked3Opera
:not(selector):not(p)3chrome,firefox,ie9+
::selection::selection3chrome,firefox,ie9+

下面说几个比较绕的:

1、[attribute~=value]:选择 attribute 属性包含单词 “value” 的所有元素。需要注意的是“包含的一定要是单词”,例如 class=”class1 class2″中包含 class2,不能说包含(包含 ss 的是 [attribute*=value] 选择器)。

2、[attribute|=value]:选择 attribute 属性值以 “value” 开头的所有元素。注意:lang=”en”,lang=”en-us”,lang=”en-gb” 都是以“en”开头的,但是 lang=”enabc”不能算(它属于 [attribute^=value] 选择器)。