浏览器与CSS选择器具体对应表

  1)关于子选择器 ( > )



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

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

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

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

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

* Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
E > F No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
E:first-child No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
E:hover Partial(1) Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
E:focus No No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
E + F No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
E[attr] No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
E[attr="name"] No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
E[attr~="name"] No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
E:before No No Yes Yes Buggy(4) Yes Yes Yes Yes Yes Yes Yes
E:after No No Yes Yes Buggy(4) Yes Yes Yes Yes Yes Yes Yes
↓ 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 No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
E[attr^="name"] No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
E[attr$="name"] No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
E[attr*="name"] No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
E[attr|="name"] No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
E:root No No No Yes Yes Yes Yes Yes Yes Yes Yes Yes
E:nth-of-type No No No Yes No Yes Yes Yes Yes Yes Yes Yes
E:nth-last-of-type No No No Yes No Yes Yes Yes Yes Yes Yes Yes
E:first-of-type No No No Yes No Yes Yes Yes Yes Yes Yes Yes
E:last-of-type No No No Yes No Yes Yes Yes Yes Yes Yes Yes
E:only-of-type No No No Yes No Yes Yes Yes Yes Yes Yes Yes
E:only-child No No No Yes Yes Yes Yes Yes Yes Yes Yes Yes
E:last-child No No No Yes Yes Yes Yes Yes Yes Yes Yes Yes
E:nth-child No No No Yes No Yes Yes Yes Yes Yes Yes Yes
E:nth-last-child No No No Yes No Yes Yes Yes Yes Yes Yes Yes
E:empty No No No Yes Yes Yes Yes Buggy(2) Yes (3) Yes Yes Yes
E:target No No No Yes Yes Yes Yes Yes Yes Yes Yes Yes
E:checked No No No Yes Yes Yes Yes Yes Yes Yes Yes Yes
E::selection No No No Yes No No No Yes Yes Yes Yes Yes
E:enabled No No No Yes Yes Yes Yes Yes Yes Yes Yes Yes
E:disabled No No No Yes Yes Yes Yes Yes Yes Yes Yes Yes
E:not(s) No No No Yes Yes Yes Yes Yes Yes Yes Yes Yes
↓ 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

  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选择器的支持情况待测。

时间: 2024-10-26 18:23:06

浏览器与CSS选择器具体对应表的相关文章

CSS网页制作教程:浏览器与CSS选择器对应表

文章简介:网页教学网这张表只是作为网页制作学习笔记,方便自己忘记的时候查找. 网页教学网这张表只是作为网页制作学习笔记,方便自己忘记的时候查找. 1)关于子选择器 ( > ) 在ie7+标准模式,chrome,ff下开始支持了.有人说在ie7下,如果父元素与子元素之间有注释的话就会失效,但是我没有发现. 2) 临近兄弟选择器(+) 在ie7+标准模式.chrome,ff下开始支持了.但是,如果父元素与子元素之间有注释的话就会失效.ie8没有. 3)普通兄弟选择器(~) 选择该元素后面的所有兄弟节

IE浏览器CSS Hack速查表(IE6/7/8/9/10)

CSS Hack的原理是什么 由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系.我们就可以根据这个来针对不同的浏览器来写不同的CSS. CSS Hack大致有3种表现形式,CSS类内部Hack.选择器Hack以及HTML头部引用(if IE)Hack,CSS Hack主要针对IE浏览器. 类内部Hack:比如 IE6能识别下划线"_"和星号" * ",IE7能识别星号" * ",但不能识别下划线"_"

css选择器命名规则:差异及可能产生的问题

文章简介:W3C CSS2.1的 4.1.3 节中提到:标识符(包括选择器中的元素名,类和ID)只能包含字符[a- zA-Z0-9]和ISO 10646字符编码U+00A1及以上,再加连字号(-)和下划线(_):它们不能以 数字,或一个连字号后跟数字为开头.它们还可以包含转义字符加任何ISO 10646字符作为一个数 操作系统版本:Windows 7 浏览器版本:IE6,IE7,IE8,Firefox 3.6.2,Safari 4.0.4,Chrome 5.0.356.2 dev 受影响的浏览器

CSS选择器学习攻略

  CSS选择器基本知识 一.基本选择器 序号 选择器 含义 1. * 通用元素选择器,匹配任何元素 2. E 标签选择器,匹配所有使用E标签的元素 3. .info class选择器,匹配所有class属性中包含info的元素 4. #footer id选择器,匹配所有id属性等于footer的元素 实例: CSS Code复制内容到剪贴板 * { margin:0; padding:0; } p { font-size:2em; } .info { background:#ff0; } p.

Css选择器命名规则

操作系统版本:Windows 7 浏览器版本:IE6,IE7,IE8,Firefox 3.6.2,Safari 4.0.4,Chrome 5.0.356.2 dev 受影响的浏览器:所有浏览器. 经常讲到css选择器命名规则,其实不只是在团队合作基础上来讲这个,每个浏览器,IE产品,火狐,苹果,谷歌,都会因为命名不规范会产生不同样式.. 一.关于选择器的命名 W3C CSS2.1的 4.1.3 节中提到:标识符(包括选择器中的元素名,类和ID)只能包含字符[a- zA-Z0-9]和ISO 106

详解CSS选择器、优先级与匹配原理

作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通过Firebug查看,发现没有起作用的属性被覆盖了.这个时候突然意识到了CSS选择器的优先级问题,这里就CSS选择器的优先级问题做了一些总结. 51CTO推荐阅读:巧妙地使用CSS选择器 选择器种类 严格来讲,选择器的种类可以分为三种:标签名选择器.类选择器和ID选择器.而所谓的后代选择器和群组选择

css选择器: 编写高效的CSS选择器

高效的CSS已经不是一个新话题,也不是一个我非得重拾的话题,但是,它却是自我在SKY工作以后,真正感兴趣并始终关注的一个话题.很多人或者忘记了,或者仅仅是没有意识到,CSS可以是高效的也可能导致低能.然而,我们可以不考虑当你自认为会的太少而使用了低效的CSS这种情况.这些规则只真正用在性能要求很高的网站上,这些网站对速度要求很高,任何一个页面可能含有成百上千个DOM元素.但是实践出真理,不管你是在打造下一个facebook 还是在开发一个本地的展示网页,多学点总是好的....CSS 选择器CSS

CSS网页设计教程:表单Button的Outline

文章简介:CSS网页设计教程:表单Button的Outline. outline的使用,大家都喜欢在reset样式表中直接重置: * {   outline: none; } Eric Meyers在他的CSS Reset是这样重置的: /* remember to define focus styles! */ :focus {     outline: 0; } 这些方法大家都可以说常见了.可是有一点可能大家还是不太清楚--outline在表单的button中使用时,在firefox浏览器下

浏览器发展/CSS布局/怎样运用?

css|浏览器 浏览器发展/CSS布局/怎样合理运用? IE7正在逼近...为什么使用逼近这个字眼呢?因为我为曾经使用CSS布局的网站感到担忧. CSS Hack 曾经为了让多个浏览器达到同样的效果,使用的又是CSS布局,我使用了CSS Hack.但随着IE7的到来,一些作用的失效,布局又出现了严重的问题.难道我们所提倡的CSS布局就是这样的让人不安么? 出现问题自然会让人想到出现问题的原因.其实不难发现我们使用CSS Hack都是在解决一些鸡毛蒜皮的小事,把原本干干净净的CSS样式表弄的神秘又