作家
登录

CSS 选择器支持列表

作者: 来源:www.28hudong.com 2012-11-19 22:31:11 阅读 我要评论

.css3selectors th, .explain {background-color:#FFFF66; padding:4px; } .css3selectors td {padding:4px;} .css3selectors td.compliant {background-color:#009900;} .css3selectors td.iffy {background-color:#FF9900;} .css3selectors td.noncompliant {background-color:#FF0000;} Update 6/30/09: Firefox 3.5 was released today. Like Safari 3.1 and newer (including Safari 4 beta), Opera 9.64 and newer and Google Chrome all support ALL CSS2.1 and CSS3 selectors. Here is a breakdown of all the browsers I’ve tested: Green / √ means current support. Orange / Δ means that the browsers have some support for the selector. Red / Χ means that the browser is non-compliant.     Browsers Pattern Meaning IE6 IE7 IE8 FireFox Safari Opera NetSc CHROME E:active   E:hover E:focus Dynamic pseudo-classes   Matches E during certain user actions. Δ Δ √ √ √ √ √ √ Δ Δ √ √ √ √ √ √ Χ Χ √ √ √ √ √ √ E:before   E:after Static pseudo-classesSee generated content Χ Χ √ √ √ √ √ √ Χ Χ √ √ √ √ √ √   iPhn Windows XP Mac OSX Selector Saf 3.2 Saf 3.0 goog chrm FF 3.5 FF 3.0   9.0 Saf   3.0 IE8 IE7 in IE8 Saf 4 beta Saf 3.2 FF 3 * √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ E √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ .class √ √ √ √ √ √ √ √ √ √ √ √ Δ √ √ √ √ √ √ √ √ #id √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ E F √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ E > F √ √ √ √ √ √ √ √ √ √ √ √ Χ √ √ √ √ √ √ √ √ E + F √ √ √ √ √ √ √ √ √ √ √ √ Χ √ √ √ √ √ √ √ √ E[attr] √ √ √ √ √ √ √ √ √ Δ Δ Δ Χ √ √ √ √ √ √ √ Δ E[attr=val] √ Δ √ √ √ Δ Δ Δ Δ √ √ √ Χ √ √ √ Δ √ √ Δ Δ E[attr~=val] √ Δ √ √ √ Δ Δ √ Δ √ Δ Δ Χ √ √ √ Δ √ √ Δ Δ E[attr|=val] √ Δ √ √ √ Δ Δ √ Δ √ Δ Δ Χ √ √ √ Δ √ √ Δ Δ :first-child √ Δ √ √ √ Δ Δ Δ Δ √ Δ Δ Χ √ √ √ Δ √ √ Δ √ :link √ √ √ √ √ √ √ Χ √ √ √ √ √ √ √ √ √ √ √ √ √ :visited √ √ √ √ √ √ √ Χ √ √ √ √ √ √ √ √ √ √ √ √ √ :lang() √ √ √ √ √ √ √ Δ √ √ Χ Χ Χ √ √ √ Χ √ √ √ √ :before √ √ √ √ √ √ √ √ √ √ Χ Χ Χ √ √ √ √ √ √ √ Χ ::before √ √ √ √ √ √ √ √ √ Χ Χ Χ Χ √ √ √ √ √ √ √ Χ :after √ √ √ √ √ √ √ √ √ √ Χ Χ Χ √ √ √ √ √ √ √ Χ ::after √ √ √ √ √ √ √ √ √ Χ Χ Χ Χ √ √ √ √ √ √ √ Χ :first-letter √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ Χ ::first-letter √ √ √ √ √ √ √ √ √ Χ Χ Χ √ √ √ √ √ √ √ √ Χ :first-line √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ Χ ::first-line √ √ √ √ √ √ √ √ √ Χ Χ Χ √ √ √ √ √ √ √ √ Χ The following selectors are new to CSS3 (above were in previous versions) E[attr^=val] √ Δ √ √ √ Δ Δ Χ Δ √ Χ Χ Χ √ √ √ Δ √ √ Δ Δ E[attr$=val] √ Δ √ √ √ Δ Δ Χ Δ √ Χ Χ Χ √ √ √ Δ √ √ Δ Δ E[attr*=val] √ Δ √ √ √ Δ Δ √ Δ √ Χ Χ Χ √ √ √ Δ √ √ Δ Δ E ~ F √ √ √ √ √ √ √ √ √ √ √ √ Χ √ √ √ Χ √ √ √ Χ :root √ √ √ √ √ √ √ Χ √ Χ Χ Χ Χ √ √ √ √ √ √ √ √ :last-child √ Χ √ √ √ Δ Δ Χ Χ Χ Χ Χ Χ √ √ √ Χ √ √ Δ Δ :only-child √ Χ √ √ √ Δ Δ Χ Χ Χ Χ Χ Χ √ √ √ Χ √ √ Δ Χ :nth-child() √ Χ √ √ Χ Χ Χ Χ Χ Χ Χ Χ Χ √ √ √ Χ √ Χ Χ Χ :nth-last-child() √ Χ √ √ Χ Χ Χ Χ Χ Χ Χ Χ Χ √ √ √ Χ √ Χ Χ Χ :first-of-type √ Δ √ √ Χ Χ Χ Χ Δ Χ Χ Χ Χ √ √ √ Χ √ Χ Χ Χ :last-of-type √ Χ √ √ Χ Χ Χ Χ Χ Χ Χ Χ Χ √ √ √ Χ √ Χ Χ Χ :only-of-type √ Χ √ √ Χ Χ Χ Χ Χ Χ Χ Χ Χ √ √ √ Χ √ Χ Χ Χ :nth-of-type() √ Χ √ √ Χ Χ Χ Χ Χ Χ Χ Χ Χ √ √ √ Χ √ Χ Χ Χ :nth-last-of-type() √ Χ √ √ Χ Χ Χ Χ Χ Χ Χ Χ Χ √ √ √ Χ √ Χ Χ Χ :empty √ Χ √ √ √ Δ Δ Χ Χ Χ Χ Χ Χ √ √ √ Χ √ √ Δ Δ :not() √ √ √ √ √ √ √ Χ √ Χ Χ Χ Χ √ √ √ √ √ √ √ √ :target √ √ √ √ √ √ √ Χ √ Χ Χ Χ Χ √ √ √ √ √ √ √ √ :enabled √ √ √ √ √ √ √ √ √ Χ Χ Χ Χ √ √ √ Χ √ √ √ Χ :disabled √ √ √ √ √ √ √ √ √ Χ Χ Χ Χ √ √ √ Χ √ √ √ Χ :checked √ √ √ √ √ √ √ √ √ Χ Χ Χ Χ √ √ √ Χ √ √ √ √ IE8 CSS Selector Support IE8 Supports the CSS2.1 selectors, including pseudoclasses but not pseudo elements. (See Double Colon Notation). IE8 has support for has support for Accessible Rich Internet Applications (ARIA) To force IE8 to render your page in IE8 compliance mode, include the following meta tag:<meta http-equiv="X-UA-Compatible" content="IE=8" /> IE7 within IE8 CSS Selector Support The CSS selector support of IE7 within IE8 (when IE8 displayes a page in IE7 compatibility mode) is identical to IE7 as a standalone. However, the CSS properties do render differently. I will have to blog about that in a seperate entry when I get around to garnering all the differences. IE7 within IE8 understands the IE7 star hack. Because the CSS renders differently even though the selector support is the same, it may take a bit before I figure out the best filter. iPhone The original version of the iPhone came with a Safari browser that did not support all CSS3 selectors. The currently active version of Safari on the iPhone does support all CSS3 selectors. The grid below has been updated to reflect that. I have kept the old version of the iPhone CSS3 support just in case you want to support "unlocked" version of the iPhone, that do not get updated as often. Personally, I assume all iphones hitting my apps support all CSS3. For more information on iPhones, see iPhone CSS Support Safari 4 Beta CSS Selector Support Safari 4.0 Beta was released Feb. 24, 2008. Since Safari 3.2 supported all CSS selectors, this Safari 4 part of the post may be a bit mute. Safari 4 beta also supports ARIA and for CSS effects, animation and canvas. It also seems to have many more native debugging tools native to the application (or maybe what I see is a carry over from the tools I installed in my previous version of Safari). Safari 4 is Acid 3 compliant! IE8 Notes: E[attr]Does not match the attribute when the attribute value is empty or not written correctly. IE7 within IE8 Notes: E[attr] Same as IE8, does not match the attribute when the attribute value is empty or not written correctly. E[attr~=val]Only issue is that for this selector to work, the value of the attribute is case sensitive E[attr|=val]IE7 has some case sensitivity issues, but generally works. :first-child IE7 considers a comment or a text node as a first-child, when it shouldn’t: only elements should be considered children. So, IE7 matches the first comment instead of the first child. If it sees text or a comment as the first child, it will not consider the first element as the first child.

  推荐阅读

  IE6不支持CSS中的min-width/height属性问题的解决方法

这么好的语法,偏偏IE 6不支持,不过说不支持也不准确,事实上IE6本身在指定height与width的值时,就具有min-width和min-height的特性,只是如果单纯用height或width来指定,到了Firefox或IE 7时,又会把它当作是>>>详细阅读


本文标题:CSS 选择器支持列表

地址:http://www.17bianji.com/kaifa2/CSS/16742.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)