手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >CSS网页制作教程:浏览器与CSS选择器对应表
CSS网页制作教程:浏览器与CSS选择器对应表
摘要: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选择器的支持情况待测。

【CSS网页制作教程:浏览器与CSS选择器对应表】相关文章:

CSS应用基础教程:应用补充

CSS选择符详解

CSS:使DIV 在浏览器窗口中水平垂直居中

兼容各浏览器:CSS定义PNG透明效果

CSS命名规范和CSS书写规范

CSS基础教程:Class以及ID选择器

CSS应用基础教程:应用方式

CSS基础教程:CSS的display属性

提高CSS的网页渲染效率11点注意项

CSS应用基础教程:基本认识

精品推荐
分类导航