Google浏览器Chrom支持的CSS选择器(CSS Selector),网页开发者应读。Google的Chrome浏览器基于Safari浏览器使用的Webkit引擎。Chrome选用AppleWebKit/525.13. Safari 3.1使用的是一个轻量级的: AppleWebKit/525.18.下面列出各类CSS选择器,包括CSS3选择器,和当前主要使用的浏览器支持的情况。
CSS选择器基础知识:类型选择器用来定位HTML标签元素,如标题h2、段落p、链接锚元素a、内联元素span、无序列表ul、列表项li等。这样的选择器还叫做字元素选择器与简单选择器。下面是使用实例:
h1 {color:#f70;}
p {line-height:1.4em;}
a {text-decoration:underline;}
span {font-size:20px;}
后代选择器,注意中间的空格,对指定标签内的元素指定CSS:li a {text-decoration:none;}
伪类选择器pseudo-class,它类似如下方式来使用:
a:link {color:#f00;}
a:visited {color:#f60;}
a:hover {color:#fc0;}
a:active {color:#000;}
input:focus {background:#ccc;}上面顺序使用了四个伪类选择器, L-V-H-A。注意使用顺序,如果不遵循这样的顺序,你的设置可能不会起作用。在这四个伪类选择器之中,link和visited两者只能用于链接的锚元素。也就是说只有a才能使用到它们。而hover和active、focus可以用在其它元素上面,称为动态伪类。
- 绿色 / √ 意思是当前支持.
- 橙色 / Δ 意思是浏览器对该选择器部分支持.
- Red / Χ 意思是浏览器不兼容.
浏览器 | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
句型 | 含义 | IE6 | IE7 | IE8 | FF | Op 9 | Sf | Op | FF | NS | CHROME |
E:active E:hover E:focus | 动态伪类 Matches E during certain user actions. | Δ | Δ | √ | √ | √ | √ | √ | √ | √ | √ |
Δ | Δ | √ | √ | √ | √ | √ | √ | √ | √ | ||
Χ | Χ | √ | √ | √ | √ | √ | √ | √ | √ | ||
E:before E:after | 静态伪类 See generated content | Χ | Χ | Δ 3 | √ | √ | √ | √ | √ | √ | √ |
Χ | Χ | Δ 3 | √ | √ | √ | √ | √ | √ | √ |
iPhn | Windows XP | Mac OSX | |||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Selector | Saf 3.0 | Chrome | FF 3.0 | FF 2.0 | FF 1.5 | Op 9.0 | Saf 3.0 | IE8 | IE7 | IE6 | Saf 3.1 | Saf 1.3 | Op | FF 2 | NS 7.1 |
* | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ |
E | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ |
.class | √ | √ | √ | √ | √ | √ | √ | √ | √ | Δ | √ | √ | √ | √ | √ |
#id | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ |
E F | √ | √ | √ | √ | √ | √ | √ | 1. | √ | √ | √ | √ | √ | √ | √ |
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 | √ | √ | √ | √ | √ | √ | √ | Χ | Χ | √ | √ | √ | √ | √ | Χ |
下面的选择器属于CSS3 (上面的在以前的版本中) | |||||||||||||||
E[attr^=val] | Δ | √ | √ | Δ | Δ | Χ | Δ | Χ 2 | Χ | Χ | √ | Δ | Χ | Δ | Δ |
E[attr$=val] | Δ | √ | √ | Δ | Δ | Χ | Δ | Χ 2 | Χ | Χ | √ | Δ | Χ | Δ | Δ |
E[attr*=val] | Δ | √ | √ | Δ | Δ | √ | Δ | Χ 2 | Χ | Χ | √ | Δ | √ | Δ | Δ |
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 | √ | √ | √ | √ | √ | √ | √ | Χ | Χ | Χ | √ | Χ | √ | √ | √ |
由上表可以看出,Chrome浏览器对CSS的选择器支持度是相当高的。
原文链接:http://www.evotech.net/blog/2008/09/google-chrome-browser-css-selector-support/