CSS 3 Selectors

熟析CSS語法的應該都知道CSS selector這東西,前兩天在XML.com看到一篇文章CSS 3 Selectors,介紹了從CSS 1、CSS 2到還在制定中的CSS 3的selectors,於是我又順便去W3CTR裡找到現在最新版的CSS 3 selectors文件,其中的第二章有個表格把所有的selector都列了出來,真的是非常多。

從最早CSS 1只有標籤、class、ID和簡單的文件結構,到CSS2,加入了萬用符號、屬性、還有如::befotre、::after、::first-letter...等等,變化已經非常多了,現在CSS 3還加入針對屬性值做搜尋的動作,一時間還真是難以想像未來要如何利用這麼多變化的功能。在目前可用但是比較少人用的selectors中,我最喜歡的就是屬性selector,我一直很想把他用在表單上,因為<input>標籤的關係。

因為<input>標籤,只要控制type屬性,他呈現在網路上的樣子就變的完全不一樣,主要可分成text、button、file、checkbox、radio五種狀況,在以前,我如果要針對各種type分別做CSS設計,那我最好的方法是給每個type一個class,對不同的type還要再設定其class name,但是有了屬性selector後,我可以直接在CSS的地方就選擇我是針對哪種type的<input>標籤,現在這個站用的CSS就有用到一個,像下面這樣:

#post_comment input[type=submit]
{
	width: 7em;
}

這是指我在發表迴響處的兩個submit按鈕的寬度要7em長,測試過的感覺真是很有趣,不過問題是IE不支援,關於這點我也不想再多說什麼了~_~,事實上我認為將來IE對CSS 3 selector也不太樂觀,然而Mozilla早已經開始在測試CSS 3 selector了。

差點變成SUCK IE文了,還是回歸本題,介紹點CSS 3的selector吧。首先是attribute selectors,也就是屬性,CSS 3比2還要多出了三種的選擇方法,都是針對屬性值做選擇的,條列如下:

E[foo^="bar"]
代表E這個標籤,有foo這個屬性,並且他的foo屬性值是「bar」開頭的。
E[foo$="bar"]
代表E這個標籤,有foo這個屬性,並且他的foo屬性值是「bar」結尾的。
E[foo*="bar"]
代表E這個標籤,有foo這個屬性,並且他的foo屬性值裡有「bar」。

同於CSS2的「E[foo="bar"]」和「E[foo~="bar"]」,這次加入了更多的正規表示式概念,不知道在更遙遠的未來會不會有可能真的用正規表示是來做選擇,甚至套用在選擇標籤上。

再來是Structural pseudo-classes了,這裡就很精采了,重頭戲在:nth-child,以前要用class指配到死的東西,以後用這個就可以輕鬆簡單的作好處理了:

E:nth-child(n)
代表E這個標籤的父標籤下面的第n個子標籤。(簡單說是第幾個E標籤的意思)
E:nth-last-child(n)
代表E這個標籤的父標籤下面的第n個子標籤,不過是從後面開始算。

最精采的在於他的第n個子標籤,正確的值應該是「an+b」,a、b是我們自己指定的數字,n則是任意數,所以如果你設定為「2n」那就是代表偶數個,「2n+1」就會成為奇數個,這最常用的地方就是表格了,以前如果要針對一個表格的奇數行和偶數行分開做CSS設定,一定要設兩個class,並且每行都要設class屬性,現在就不用了,只要用如下的語法就可以達到希望的效果了,不用再設一堆class屬性。

tr:nth-child(2n+1)
{
	background-color: red;
}
tr:nth-child(2n)
{
	background-color: blue;
}

Structural pseudo-classes裡新增的還有:root、:nth-of-type()等,其中「:root」是針對文件的第一個標籤做選擇,至於「:nth-of-type()」我則看不太懂他的意思,不過似乎可以和「:nth-child」配合的樣子。

最後要介紹的是Indirect adjacent combinator,範例如下:

E ~ F
代表一個不是直接接在E元素後面的F元素。

這是和之前就有的「E + F」相對的,其實我覺得「E + F」這種Direct adjacent combinators蠻有用的,本來這站台的CSS有要用到他的,不過因為IE不支援,所以我後來想了其他方法來代替,也算是小有缺憾^^b

基本上就介紹上面幾個,那個「nth-of-type」看不懂實在是很抱歉><,不過比較具代表性的都有了。感覺上以後CSS2的發展會不再單純只是配合HTML或是XHMTL了,當然最主要的原因是「:root」的出現,不然它的出現我也想不到其他解釋,或許是有什麼神妙的用法我沒想到也說不定吧。