账号通
    

账号  

密码  

3390

查看

4

回复
主题:[分享]CSS选择器的浏览器支持比较 [收藏主题] 转到:  
licaifuwu 当前离线

653

主题

10

广播

17

粉丝
添加关注
级别:六年级

用户积分:1585 分
登录次数:361 次
注册时间:2010/11/19
最后登录:2019/5/7
licaifuwu 发表于:2011/3/19 13:48:00   | 只看该作者 查看该作者主题 楼主 
科汛在线网校系统

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

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

CSS 1
 
 ↓ 选择器 /

浏览器 →
 IE6 IE7 IE8 FF 2 FF 3 FF 3.5 Safari 3.0 Safari 3.2+ Chrome 2 Opera
 ↑ 选择器 /

浏览器 →
 IE6 IE7 IE8 FF 2 FF 3 FF 3.5 Safari 3.0 Safari 3.2+ Chrome 2 Opera
 E Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
 E F Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
 :link Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
 E:active Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
 :visited Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
 E:first-line No Yes Yes Yes Yes Yes Yes Yes Yes Yes
 E:first-letter No Yes Yes Yes Yes Yes Yes Yes Yes Yes
 E.classname Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
 E#id Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
 .classname.classname No Yes Yes Yes Yes Yes Yes Yes Yes Yes
CSS 2.1
 
 ↓ 选择器 /

浏览器 →
 IE6 IE7 IE8 FF 2 FF 3 FF 3.5 Safari 3.0 Safari 3.2+ Chrome 2 Opera
 ↑ 选择器 /

浏览器 →
 IE6 IE7 IE8 FF 2 FF 3 FF 3.5 Safari 3.0 Safari 3.2+ Chrome 2 Opera
 * Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
 E > F No Yes Yes Yes Yes Yes Yes Yes Yes Yes
 E:first-child No Yes Yes Yes Yes Yes Yes Yes Yes Yes
 E:hover Partial (1) Yes Yes Yes Yes Yes Yes Yes Yes Yes
 E:focus No No Yes Yes Yes Yes Yes Yes Yes Yes
 E + F No Yes Yes Yes Yes Yes Yes Yes Yes Yes
 E[attr] 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:before No No Yes Yes Yes Yes Yes Yes Yes Yes
 E:after No No Yes Yes Yes Yes Yes Yes Yes Yes
CSS 3
 
 ↓ 选择器 /

浏览器 →
 IE6 IE7 IE8 FF 2 FF 3 FF 3.5 Safari 3.0 Safari 3.2+ Chrome 2 Opera
 ↑ 选择器 /

浏览器 →
 IE6 IE7 IE8 FF 2 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 No No Yes No Yes Yes Yes
 E:nth-last-of-type No No No No No Yes No Yes Yes Yes
 E:first-of-type No No No No No Yes Yes Yes Yes Yes
 E:last-of-type No No No No No Yes No Yes Yes Yes
 E:only-of-type No No No No 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 No No Yes No Yes Yes Yes
 E:nth-last-child No No No No No Yes No Yes Yes Yes
 E:empty No No No Yes Yes Yes Buggy (2) Yes (3) Buggy (2) 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 No No No 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

  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选择器的支持情况待测
 
  支持(16) | 反对(16) 回到顶部顶端 回到底部底部
sanyoudouji 当前离线

297

主题

0

广播

0

粉丝
添加关注
级别:二年级

用户积分:379 分
登录次数:93 次
注册时间:2011/3/10
最后登录:2011/7/1
sanyoudouji 发表于:2011/3/19 15:49:21   | 只看该作者 查看该作者主题 沙发 
 
<a href=http://www.sanyoudouji.com.cn/info_315.html>斗鸡</a>
  支持(16) | 反对(16) 回到顶部顶端 回到底部底部
chenqitaiche 当前离线

33

主题

0

广播

0

粉丝
添加关注
级别:学前班

用户积分:43 分
登录次数:9 次
注册时间:2011/3/10
最后登录:2011/3/22
chenqitaiche 发表于:2011/3/19 15:50:14   | 只看该作者 查看该作者主题 藤椅 
 
<a href=http://www.chenqitc.com>桥隧衬砌台车</a>http://www.chenqitc.com
  支持(12) | 反对(9) 回到顶部顶端 回到底部底部
luoderui2004 当前离线

107

主题

0

广播

0

粉丝
添加关注
级别:一年级

用户积分:146 分
登录次数:23 次
注册时间:2010/7/3
最后登录:2012/6/25
luoderui2004 发表于:2011/4/25 15:53:41   | 只看该作者 查看该作者主题 板凳 
 
  支持(5) | 反对(3) 回到顶部顶端 回到底部底部
270620812 当前离线

113

主题

0

广播

0

粉丝
添加关注
级别:学前班

用户积分:107 分
登录次数:6 次
注册时间:2010/11/27
最后登录:2011/4/26
270620812 发表于:2011/4/26 16:04:51   | 只看该作者 查看该作者主题 报纸 
 
  支持(1) | 反对(0) 回到顶部顶端 回到底部底部
<上一主题 | 下一主题 >
Powered By KesionCMS Version X1
厦门科汛软件有限公司 © 2006-2016 页面执行0.21875秒 powered by KesionCMS 9.0