CSS 3 Selectors

(本文章原文在 O3noBLOG上，並由原作者張貼於 hlb Tavi )

熟析 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」的出現，不然它的出現我也想不到其他解釋，或許是有什麼神妙的用法我沒想到也說不定吧。

參考

柏強在 ErnEstWiki 上列了一篇關於 CSS3 Selector 的筆記