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