CSS选择器的浏览器支持

下面是一系列关于最流行的浏览器对CSS选择器和伪选择器的支持情况的测试。该测试包括从过去美好的CSS1到当前时髦的CSS3最基本的东西。如果你想了解关于CSS的选择器的更多内容,W3C官方文档绝对是个好地方!

如果你发现了任何错误(这个,大家都会发生的)或者有任何看法,请在前端观察联系我们。

查看修改历史↓

修改历史(非完整):
2009-08-20:发布中文版,由于Safari3.2+所有版本,包括当前的Safari 3.2+已经完全支持这些CSS选择器,所以将Safari 3.2+更改为Safari 3.2+
2009.08.05: 使用Firefox最终版替换掉Firefox 3.5 beta 4 。Chrome 1 替换为Chrome 2。并更改lightbox功能。
2009.06.15: 添加Firefox 3.5 beta 4
2009.06.11: Safari 3.2+ beta 替换为正式版
2009.03.17: 替换Safari 3.2+ beta
2009.03.04: 完全重构!新的界面,更多选择器,更好的测试,更多浏览器。移除min-width 和max-width 因为它们不是选择器。
2008.10.31: 添加Internet Explorer 8 beta 2 - 主要增加相对于IE7的增强!
2008.09.11: 添加Google Chrome
2008.06.27: 去掉Firefox 1.5并替换为Firefox3.并将所有的safari测试升级到Safari3。
2007.07.13: 更正:checked 测试。貌似Firefox支持该选择器,但是只是不支持复选框上的红色边框...
2007.03.16: 添加:checked 测试
2007.01.12: 添加Konqueror 3.5.5 - 它能认识所有选择器!
2007.01.09: 添加Firefox 2.0.0.1
2007.01.04: 添加:nth-child 测试
2007.01.04: 改良:min-width:max-width
2007.01.02: 添加Opera 9.10
2006: 创建...
CSS 1
↓ 选择器 /
浏览器 →
IE6 IE7 + FF 2 + Safari 3.0 + Chrome 2 + Opera
↑ 选择器 /
浏览器 →
IE6 IE7 + FF 2 + Safari 3.0 + Chrome 2 + Opera
E Yes Yes Yes Yes Yes Yes
E F Yes Yes Yes Yes Yes Yes
:link Yes Yes Yes Yes Yes Yes
E:active Yes Yes Yes Yes Yes Yes
:visited Yes Yes Yes Yes Yes Yes
E:first-line No Yes Yes Yes Yes Yes
E:first-letter No Yes Yes Yes Yes Yes
E.classname Yes Yes Yes Yes Yes Yes
E#id Yes Yes Yes Yes Yes Yes
.classname.classname No Yes Yes Yes Yes Yes
CSS 2.1
↓ 选择器 /
浏览器 →
IE6 IE7 IE8 + FF 2 + Safari 3.0 Safari 3.2+ Chrome 2 + Opera
↑ 选择器 /
浏览器 →
IE6 IE7 IE8 + FF 2 + Safari 3.0 Safari 3.2+ Chrome 2 + Opera
* Yes Yes Yes Yes Yes Yes Yes Yes
E > F No Yes Yes Yes Yes Yes Yes Yes
E:first-child No Yes Yes Yes Yes Yes Yes Yes
E:hover Partial (1) Yes Yes Yes Yes Yes Yes Yes
E:focus No No Yes Yes Yes Yes Yes Yes
E + F No Yes Yes Yes Yes Yes Yes Yes
E[attr] No Yes Yes Yes Yes Yes Yes Yes
E[attr="name"] No Yes Yes Yes Yes Yes Yes Yes
E[attr~="name"] No Yes Yes Yes Yes Yes Yes Yes
E:before No No Yes Yes Yes Yes Yes Yes
E:after No No Yes Yes Yes Yes Yes Yes
CSS 3
↓ 选择器 /
浏览器 →
IE6 IE7 IE8 IE9 + FF 3 FF 3.5 + Safari 3.0 Safari 3.2+ Chrome 2 Opera
↑ 选择器 /
浏览器 →
IE6 IE7 IE8 IE9 + FF 3 FF 3.5 + Safari 3.0 Safari 3.2+ Chrome 2 Opera
E ~ F No Yes Yes Yes Yes Yes Yes Yes Yes Yes
E[attr^="name"] No Yes Yes Yes Yes Yes Yes Yes Yes Yes
E[attr$="name"] No Yes Yes Yes Yes Yes Yes Yes Yes Yes
E[attr*="name"] No Yes Yes Yes Yes Yes Yes Yes Yes Yes
E[attr|="name"] No Yes Yes Yes Yes Yes Yes Yes Yes Yes
E:root No No No Yes Yes Yes Yes Yes Yes Yes
E:nth-of-type No No No Yes No Yes No Yes Yes Yes
E:nth-last-of-type No No No Yes No Yes No Yes Yes Yes
E:first-of-type No No No Yes No Yes Yes Yes Yes Yes
E:last-of-type No No No Yes No Yes No Yes Yes Yes
E:only-of-type No No No Yes No Yes No Yes Yes Yes
E:only-child No No No Yes Yes Yes No Yes Yes Yes
E:last-child No No No Yes Yes Yes No Yes Yes Yes
E:nth-child No No No Yes No Yes No Yes Yes Yes
E:nth-last-child No No No Yes No Yes No Yes Yes Yes
E:empty No No No Yes Yes Yes Yes Yes (3) Yes Yes
E:target No No No Yes Yes Yes Yes Yes Yes Yes
E:checked No No No Yes Yes Yes Yes Yes Yes Yes
E:selection No No No Yes Yes
只支持-moz-
Yes
只支持-moz-
Yes Yes Yes Yes
E:enabled No No No Yes Yes Yes Yes Yes Yes Yes
E:disabled No No No Yes Yes Yes Yes Yes Yes Yes
E:not(s) No No No Yes Yes Yes Yes Yes Yes Yes
  1. :hover 在IE6中只有a元素可用。
  2. E:empty 貌似在webkit核心浏览器中有些小bug。
  3. 如果这个bug依然存在,不太确定如何测试。
  4. IE6不支持.class1{}.class2{}双类选择器。

IE8注意事项:

IE8中的IE7兼容模式

Safari/Chrome