選擇器學不好，要飯要到老（誤）我認為學好CSS選擇器對於網站效率有很大幫助，當然這點我也還在學習當中。
以下是紀錄CSS的選擇器，文章若有謬誤還請不吝指正m(_ _)m。
ID selectors-ID選擇器
在CSS檔中寫成#NAME，一個檔案中只會有一個，跟身分證字號是一樣的意思。
Class selectors-Class選擇器
在CSS檔中寫成.NAME，一個Class可以同時套用到多個不同的元素上，就像是“小男孩”、“小女孩”可以有很多個！用來設定樣式很方便，只是名字一多容易混亂，所以Class命名尤其重要…取一堆abc123的，最後哭的一定是自己呀….。
ID只能有一個，Class可以有很多個，那ID跟Class能不能用同一個名字呢？答案是可以的，不過樣式如果有互相衝突，當然會以ID為主，畢竟老大只有一個，他比較大要讓他（喂）
雖然看過有網路文章認為命名使用ID會讓速度比較快，但因為ID同時也是Javascript用來控制的名稱，所以能不用就不用，不然要給程式套的話可是會很頭大的。
Type selectors-屬性選擇器
例如a, h1, div…等等，可直接使用Html元素作選擇器。
如果個別元素要一次作全頁設定，用這個就對了：
|
1 2 |
; html-script: false ] a { color: #069; } |
Universal selector-通用選擇器
只要輕輕的按下一個*字鍵，這個網頁的設定就全聽你的了….頗暴力的做法吶。
|
1 2 |
; html-script: false ] * { color: black; } |
Descendant combinator-後代選擇器
如果想要讓某區塊“底下”的選擇器全部套用同一個設定的話，就使用後代選擇器，
寫法是A（空一格）B。
|
1 2 |
; html-script: false ] .test a { color: #555; } |
所以.test裡面的a元素通通都會套用到設定，中間又加了甚麼並不會造成影響：
|
1 2 3 4 5 6 7 |
; html-script: false ] <div class="test"> <a>link</a> <p>sentence</p> <a>link</a> <a>link</a> </div> |
Child combinator-子選擇器
像是父傳子般的繼承樣式，子元素也要在父元素下方才有作用。寫法是A>B。
|
1 2 |
; html-script: false ] p>span { color: red; } |
以上面的CSS來看，底下這行能不能動呢？
|
1 2 3 4 5 |
; html-script: false ] <p> 我是 <i>一隻<span>魚</span></i> </p> |
那麼這行呢XD？
|
1 2 3 4 5 6 |
; html-script: false ] <p> 我是 <i>一隻</i> <span>魚</span> </p> |
以上是今天的CSS選擇器，晚安！
本文同步發表於http://ithelp.ithome.com.tw/question/10137655