欢迎访问品牌策划旗下产品博比管理系统官方网站！
博比管理系统

CSS选择器的兼容性

来源：博比管理系统 日期：2015-09-08 12:24:11 属于：浏览器兼容专题
下面是一系列关于最流行的浏览器对CSS选择器和伪选择器的支持情况的测试。
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注意事项：

  • E[attr]选择器在值为空的时候或者写错的时候，将不会生效；
  • IE8支持CSS2.1的所有属性，支持伪类，但是不支持伪元素。

IE8中的IE7兼容模式

  • E[attr] 和IE8一样，值为空或写错的时候，无效；
  • E[attr~=val]这里唯一需要注意的是，属性的值，区分大小写；
  • E[attr|=val]IE7有一些大小写敏感的问题，但是通常可以正常使用；
  • :first-child IE7 会将一个注释或者文字节点当成first-child，而不是只有元素才是“子”元素。所以，如果在第一个子元素前有注释或文字，IE7会匹配之而不是去匹配第一个子元素。

Safari/Chrome

  • Safari3.2(事实上可以追溯到3.1)以上的版本已经完全的支持所有CSS选择器了。
  • Safari3.0基本上对CSS 2的选择器支持很好，但不支持CSS3大部分新增的选择器，而且对属性选择器的支持不是很完整。
  • iPhone中的Safari有3.0和3.2两个版本，对CSS的支持情况与PC/Mac版的支持情况一致。
  • Android系统自带的浏览器基本上也是基于webkit核心的，其对于CSS选择器的支持情况待测。

上一文章：没有了

下一文章：解决IE6兼容性问题常见方法

相关文章