CSS网页制作教程:浏览器与CSS选择器对应表
CSS网页制作教程:浏览器与CSS选择器对应表
发布时间:2016-12-27 来源:查字典编辑
摘要:1)关于子选择器(>)在ie7+标准模式,chrome,ff下开始支持了。有人说在ie7下,如果父元素与子元素之间有注释的话就会失效,但是我...

1)关于子选择器 ( > )

在ie7+标准模式,chrome,ff下开始支持了。有人说在ie7下,如果父元素与子元素之间有注释的话就会失效,但是我没有发现。

2) 临近兄弟选择器(+)

在ie7+标准模式。chrome,ff下开始支持了。但是,如果父元素与子元素之间有注释的话就会失效。ie8没有。

3)普通兄弟选择器(~)

选择该元素后面的所有兄弟节点,在ie7+标准模式,chrome,ff下支持。它和临近兄弟节点选择器的区别就是,前者就选择后面所有的,不要求相邻,但是后面必须是相邻,且选择一个。

CSS 2.1

↓ Selector / Browser → IE6 IE7 IE8 IE9 preview FF 3 FF 3.5 FF 3.6 Safari 3 Safari 4 Chrome 5 beta Opera Opera 10.5 beta ↑ Selector / Browser → IE6 IE7 IE8 IE9 preview FF 3 FF 3.5 FF 3.6 Safari 3 Safari 4 Chrome 5 beta Opera Opera 10.5 beta * E > F E:first-child E:hover E:focus E + F E[attr] E[attr="name"] E[attr~="name"] E:before E:after
Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
Partial(1) Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
No No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
No No Yes Yes Buggy(4) Yes Yes Yes Yes Yes Yes Yes
No No Yes Yes Buggy(4) Yes Yes Yes Yes Yes Yes Yes
CSS 3 ↓ Selector / Browser → IE6 IE7 IE8 IE9 preview FF 3 FF 3.5 FF 3.6 Safari 3 Safari 4 Chrome 5 beta Opera Opera 10.5 beta ↑ Selector / Browser → IE6 IE7 IE8 IE9 preview FF 3 FF 3.5 FF 3.6 Safari 3 Safari 4 Chrome 5 beta Opera Opera 10.5 beta E ~ F E[attr^="name"] E[attr$="name"] E[attr*="name"] E[attr|="name"] E:root E:nth-of-type E:nth-last-of-type E:first-of-type E:last-of-type E:only-of-type E:only-child E:last-child E:nth-child E:nth-last-child E:empty E:target E:checked E::selection E:enabled E:disabled E:not(s)
No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
No No No Yes Yes Yes Yes Yes Yes Yes Yes Yes
No No No Yes No Yes Yes Yes Yes Yes Yes Yes
No No No Yes No Yes Yes Yes Yes Yes Yes Yes
No No No Yes No Yes Yes Yes Yes Yes Yes Yes
No No No Yes No Yes Yes Yes Yes Yes Yes Yes
No No No Yes No Yes Yes Yes Yes Yes Yes Yes
No No No Yes Yes Yes Yes Yes Yes Yes Yes Yes
No No No Yes Yes Yes Yes Yes Yes Yes Yes Yes
No No No Yes No Yes Yes Yes Yes Yes Yes Yes
No No No Yes No Yes Yes Yes Yes Yes Yes Yes
No No No Yes Yes Yes Yes Buggy(2) Yes (3) Yes Yes Yes
No No No Yes Yes Yes Yes Yes Yes Yes Yes Yes
No No No Yes Yes Yes Yes Yes Yes Yes Yes Yes
No No No Yes No No No Yes Yes Yes Yes Yes
No No No Yes Yes Yes Yes Yes Yes Yes Yes Yes
No No No Yes Yes Yes Yes Yes Yes Yes Yes Yes
No No No Yes Yes 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选择器的支持情况待测。

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新 Div+Css教程学习
热门 Div+Css教程学习
网页设计子分类