CSS 选择器的浏览器兼容

2014-02-28 · 489 chars · 3 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+
a
2所有
a
2所有
a
2所有
a
2所有
input
2chrome,firefox,ie7+
p
2所有
p
2所有
p
2chrome,firefox,ie7+
p
2chrome,firefox,ie8+
p
2chrome,firefox,ie8+
(language)
p
(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+
p
3chrome,firefox,ie9+
p
3chrome,firefox,ie9+
p
3chrome,firefox,ie9+
p
3chrome,firefox,ie9+
(n)
p
(2)
3chrome,firefox,ie9+
(n)
p
(2)
3chrome,firefox,ie9+
(n)
p
(2)
3chrome,firefox,ie9+
(n)
p
(2)
3chrome,firefox,ie9+
p
3chrome,firefox,ie9+
3chrome,firefox,ie9+
p
3chrome,firefox,ie9+
#news
3chrome,firefox,ie9+
input
3chrome,firefox,ie9+
input
3chrome,firefox,ie9+
input
3Opera
(selector)
(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] 选择器)。

赞赏

微信