CSS選擇器

CSS選擇器是學習CSS裡蠻重要而且很基礎的觀念，在CSS2定義裡共有十種選擇器，稍微在這邊整理一下。

1.類型選擇器(Type Selector):
就是選擇html的標籤，如：
h1{
color:#ccc;
}

2.類別選擇器(Class Selector):
選擇class="xx"的元素，如：
.xx{
color:#ccc;
}

3.ID選擇器(ID Selector):
選擇ID="xx"的元素，跟class不同的是一個是"."，一個是"#"，這個初學者很容易搞錯，如：
#xx{
color:#ccc;
}

4.後代選擇器(Descendant Selector)
選擇xx元素裡面的xx元素，只要以空白分隔就可以了，如：
#xx .xx{
color:#ccc;
}
這個就是選擇id=xx裡面的class=xx的元素。

5.子選擇器(Child Selector):
選擇跟上面那層只差一層的元素，用">"表示，如：
#xx>.xx{
color:#ccc;
}
這個會選到id=xx包住的第一層class=xx的元素，如果那個class=xx的元素又被其他元素包住，則不會選擇到。

6.全域選擇器(Universal Selector):
整個網頁都會被選到，使用"*"

7.相鄰選擇器(Adjacent Silbing Selector):
選擇旁邊的選擇器，使用"+"，如：
h1+h1{
color:#ccc;
}
選擇第一個h1下面的第二個h1。

8.屬性選擇器(Attribute Selector):
以html標籤下的屬性選擇元素，有以下四種選擇方式：
h1[class] //符合所有含class的h1標籤即可
h1[class=title] //符合含class=title的h1標籤
h1[class~=title] //只要calss裡頭有包含title文字的h1標籤
h1[class|=title] //class的開始值必須為title的h1標籤

9.虛擬類別(Pseudo-Classes):
大家熟悉的a:link、a:visited、a:hover、a:active就是這種。

10.虛擬元素(Pseudo-Elements):
包含first-line(選擇第一行)及:first-letter(選得第一個字母)，不過ie不大支援，用的時候要謹慎。

而根據網站效率專家Steve Souders指出，各種css選擇器的效率由高至低排列如下：
1. ID (#)
2. Class (.)
3. 類型選擇器
4. 相鄰選擇器 (+)
5. 子選擇器 (>)
6. 後代選擇器
7. 全域選擇器 (*)
8. 屬性選擇器 ([type="text"])
9. 虛擬類別/元素 (:hover)