一些很酷的範例

CSS 選擇符是讓你設定樣式的套用條件的文法，它功能強大，可允許你用很簡潔的程式碼來對不同情況做很有彈性的格式與樣式定義。以下是一些範例:

• 依據元素類別定義樣式: .warning { color:red; } (所有叫"warning"(警示)的元素用紅字)
• 依據元素屬性定義樣式: a[href^=http]:after{content:url('img/extURL');} (所有外部(http)鏈結的後面用一個圖示標示)
• 依據元素狀態定義樣式: *:target{background-color:#yellow} (如果有用目標連結(href="#目標")，則目標會用黃背景突顯顯示)
• 依據元素位置定義樣式: .infobox :link {text-decoration:none;} (所有在小資訊方塊內的鏈結不用底線)

blah

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

• • 補充:CSS3 Selector Explained這篇裡面, 對於:nth-of-type(), 有很簡單明瞭的解釋.

參考

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