| 導購 | 订阅 | 在线投稿
分享
 
 
 

google chrome 的CSS hack來了

來源:互聯網  2008-09-05 07:10:19  評論

浏覽器多了也就這麽個「好處」了……

以下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

Op9.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

Χ

Χ

Χ

Χ

浏覽器多了也就這麽個「好處」了…… 以下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 [url=http://www.dimlau.com/very/css/selector.html#dynamic-pseudo-classes]Dynamic pseudo-classes[/url] Matches E during certain user actions. Δ Δ √ √ √ √ √ √ √ √ Δ Δ √ √ √ √ √ √ √ √ Χ Χ √ √ √ √ √ √ √ √ E:before E:after [url=http://www.dimlau.com/very/css/selector.html#before-and-after]Static pseudo-classes[/url] See [url=http://www.dimlau.com/very/css/generate.html]generated content[/url] Χ Χ Δ 3 √ √ √ √ √ √ √ Χ Χ Δ 3 √ √ √ √ √ √ √ iPhn Windows XP Mac OSX Selector Saf 3.0 Chrome FF 3.0 FF 2.0 FF 1.5 Op9.0 Saf 3.0 IE8 IE7 IE6 Saf 3.1 Saf 1.3 Op FF 2 NS 7.1 * √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ E √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ .class √ √ √ √ √ √ √ √ √ [url=http://www.evotech.net/blog/2007/04/css-selectors-and-browser-support/]Δ[/url] √ √ √ √ √ #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 √ √ √ √ √ √ √ Χ Χ Χ √ Χ √ √ √
󰈣󰈤
王朝萬家燈火計劃
期待原創作者加盟
 
 
 
>>返回首頁<<
 
 
 
 
 熱帖排行
 
 
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有