CSS选择器的浏览器兼容

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

例子 CSS 兼容性
element>element div>p 2 chrome,firefox,ie7+
element+element div+p 2 chrome,firefox,ie7+
[attribute] a[target] 2 chrome,firefox,ie7+
[attribute=value] a[target=_blank] 2 chrome,firefox,ie7+
[attribute~=value] a[class~=keenwon] 2 chrome,firefox,ie7+
[attribute|=value] [lang|=en] 2 chrome,firefox,ie7+
:link a:link 2 所有
:visited a:visited 2 所有
:active a:active 2 所有
:hover a:hover 2 所有
:focus input:focus 2 chrome,firefox,ie7+
:first-letter p:first-letter 2 所有
:first-line p:first-line 2 所有
:first-child p:first-child 2 chrome,firefox,ie7+
:before p:before 2 chrome,firefox,ie8+
:after p:after 2 chrome,firefox,ie8+
:lang(language) p:lang(it) 2 chrome,firefox,ie8+
element1~element2 p~ul 3 chrome,firefox,ie7+
[attribute^=value] img[src^="https"] 3 chrome,firefox,ie7+
[attribute$=value] img[src$=".pdf"] 3 chrome,firefox,ie7+
[attribute*=value] img[src*="abc"] 3 chrome,firefox,ie7+
:first-of-type p:first-of-type 3 chrome,firefox,ie9+
:last-of-type p:last-of-type 3 chrome,firefox,ie9+
:only-of-type p:only-of-type 3 chrome,firefox,ie9+
:only-child p:only-child 3 chrome,firefox,ie9+
:nth-child(n) p:nth-child(2) 3 chrome,firefox,ie9+
:nth-last-child(n) p:nth-last-child(2) 3 chrome,firefox,ie9+
:nth-of-type(n) p:nth-of-type(2) 3 chrome,firefox,ie9+
:nth-last-of-type(n) p:nth-last-of-type(2) 3 chrome,firefox,ie9+
:last-child p:last-child 3 chrome,firefox,ie9+
:root :root 3 chrome,firefox,ie9+
:empty p:empty 3 chrome,firefox,ie9+
:target #news:target 3 chrome,firefox,ie9+
:enabled input:enabled 3 chrome,firefox,ie9+
:disabled input:disabled 3 chrome,firefox,ie9+
:checked input:checked 3 Opera
:not(selector) :not(p) 3 chrome,firefox,ie9+
::selection ::selection 3 chrome,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] 选择器)。



标签:

无觅相关文章插件,快速提升流量