电脑技术学习

google chrome 的CSS hack来了

dn001

浏览器多了也就这么个“好处”了……

以下CSS语句目前只有Google Chrome和Safari 3.1可以正常解释。

body:nth-of-type(1) p {
color: #333333;
}关于这个hack起作用的解释如下:

每个网页只有一个body元素
body:nth-of-type(1)将匹配页面内第一个也是唯一的一个body元素
只有Safari 3.1和google chrome支持:nth-of-type伪类
另附各浏览器对部分css的支持情况:

绿色 / √ 表示完全支持
橙色 / Δ 表示部分支持
红色 / Χ 表示不支持

Browsers
Pattern Meaning IE6 IE7 IE8 FF Op
9
Sf Op FF NS CHROME
E:active
E:hover
E:focus
Dynamic pseudo-classes
Matches E during certain user actions.
Δ Δ
Δ Δ
Χ Χ
E:before
E:after
Static pseudo-classes
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 Χ Χ Χ
The following selectors are new to CSS3 (above were in previous versions)
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 Χ Χ Χ Χ