CSS 3 Selectors : O3noBLOG

12月 23日

CSS 3 Selectors

熟析CSS語法的應該都知道CSS selector這東西，前兩天在XML.com看到一篇文章CSS 3 Selectors，介紹了從CSS 1、CSS 2到還在制定中的CSS 3的selectors，於是我又順便去W3C的TR裡找到現在最新版的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」的出現，不然它的出現我也想不到其他解釋，或許是有什麼神妙的用法我沒想到也說不定吧。

單篇彙整