众果搜的博客

脚踏大地,仰望星空,致力于财经投资网站导航与在线网络工具的开发与普及

Search(博客搜索)

热文排行

最近发表

最新评论及回复

« 谷歌浏览器Chrome的标签保存在什么地方?如何快速的清理Gmail中不需要的邮件 »

Chrome浏览器器对CSS选择器(CSS Selector)的兼容支持情况

 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;}

后代选择器,注意中间的空格,对指定标签内的元素指定CSSli 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。注意使用顺序,如果不遵循这样的顺序,你的设置可能不会起作用。在这四个伪类选择器之中,linkvisited两者只能用于链接的锚元素。也就是说只有a才能使用到它们。而hoveractivefocus可以用在其它元素上面,称为动态伪类。

  • 绿色 / √ 意思是当前支持.
  • 橙色 / Δ 意思是浏览器对该选择器部分支持.
  • 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/

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

Powered By Z-Blog 1.8 Spirit Build 80722 Code detection by Codefense

Copyright www.zhongguosou.com. Some Rights Reserved.微信号:MiZhiHeiGeTaXiaoMi