浏览器多了也就这么个“好处”了……
以下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 |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
Χ |
Χ |
Χ |
√ |
Χ |
√ |
√ |
√ |