google chrome 的CSS hack来了

资讯 2009-07-31 驱动中国 286次阅读

AI摘要

由 AI 生成 · 仅供参考

googlechrome的CSShack来了,浏览器多了也就这么个“好处”了……以下CSS语句目前只有GoogleChrome和Safari3.1可以正常解释。body:nth-of-type1p{nbsp;nbsp;color:#333333;}关于这个hack起作用的解释如下：每个网页只有一个body元素body:nth-of-type1将匹配页面内第一个也是唯一的一个body元素只有..

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

以下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	Matches E during certain user actions.	Δ	Δ	√	√	√	√	√	√	√	√
Δ	Δ	√	√	√	√	√	√	√	√
Χ	Χ	√	√	√	√	√	√	√	√
E:before E:after	See	Χ	Χ	Δ 3	√	√	√	√	√	√	√
Χ	Χ	Δ 3	√	√	√	√	√	√	√

	iPhn	Windows XP	Mac OSX
Selector	Saf 3.0	Chrome	FF 3.0		√	√	√	√	√
#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	√	√	√	√	√	√	√	Χ	Χ	Χ	√	Χ	√	√	√

googlechrome的CSShack来了学习googl

本文价值 ★★★★★ — 成为第一个评分的人

登录后为本文打分

网友评论0 条评论

正在回复的评论取消

评论加载中…

🔐

登录后参与互动

评论、点赞均可赚积分
连续签到、邀请好友也有奖励 🎁

电脑端: 微信扫码登录微信内: 一键登录

google chrome 的CSS hack来了

登录后参与互动

微信扫一扫

分享卡已生成