#第2章 CSS3選擇器
> W3C在CSS3的工作草案中把選擇器獨立出來成為一個模塊。實際上，選擇器是CSS只是中的重要部分之一，也是CSS的根基。利用CSS選擇器能不改動HTML結構，通過添加不同的CSS規則得到不同的樣式的結果。
##2.1 認識CSS選擇器
要使用某個樣式用于特定的HTML元素，首先需要找到該元素。在CSS中，執行這一任務的表現規則稱為CSS選擇器。它為獲取目標元素之后施加樣式提供了極大的靈活性。
###2.1.1 CSS3選擇器的優勢
> CSS3選擇器在常規選擇器的基礎上新增了屬性選擇器、偽類選擇器、過濾選擇器。可以幫助您在開發中減少對HTML類名或ID名的依賴，以及對HTML元素的結構依賴，使編寫代碼更加簡單輕松。如果學習過jQuery選擇器，學習CSS3選擇器會更容易，因為CSS3選擇器在某些方面和jQuery選擇器是完全一樣的，唯一遺憾的是部分舊版本瀏覽器并不支持CSS3選擇器。
###2.1.2 CSS3選擇器分類
根據所獲取頁面中元素的不同，把CSS3選擇器分為五大類：基本選擇器、層次選擇器、偽類選擇器、偽元素和屬性選擇器。其中，偽類選擇器又分為六種：動態偽類選擇器、目標偽類選擇器、語言未來、UI元素狀態偽類選擇器、結構偽類選擇器和否定偽類選擇器。如下圖所示。
**下面分別介紹著10種選擇器**
##2.2 基本選擇器
> 基本選擇器是CSS種使用最頻繁、最基礎，也是CSS種最早定義的選擇器。這部分選擇器在CSS1中就定義了，為了更便于初學者溫故而知新，不妨回顧CSS的基礎選擇器。
###2.2.1 基本選擇器語法
通過基本選擇器可以確定HTML樹形結構中大多數的DOM元素節點。詳細說明如下所示：
| 選擇器 | 類型 | 功能描述 |
| -------- | -----: | :----: |
| `*` | 通配選擇器 | 選擇文檔中所有的HTML元素 |
| `E` | 元素選擇器 | 選擇制定的類型的HTML元素 |
| `#id` | ID選擇器 | 選擇制定ID屬性值為`“id”`的任意類型元素 |
| `.class` | 類選擇器 | 選擇之類 `class` 屬性為`“class”`的任意類型的任意多個元素 |
| `sleector1,selectorN` | 群組選擇器 | 將每一個選擇器匹配的元素集合并 |
###2.2.2 瀏覽器兼容性
> 基本選擇器均可使用。
###2.2.3 實戰體驗 ： 使用基本選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用CSS3基本選擇器</title>
<style>
*{margin: 0;padding: 0}
.clearfix:after,.clearfix:before{display: table;content: '';}
.clearfix:after{clear: both;overflow: hidden;}
.demo{width: 250px;border: 1px solid #ccc;padding: 10px;margin: 20px auto;}
li{list-style: none;float: left;height: 20px;line-height: 20px;width: 20px;border-radius: 10px;text-align: center;background-color: #f36;color: green;margin-right: 5px;}
</style>
</head>
<body>
<ul class="demo clearfix">
<li class="first" id="first">1</li>
<li class="active">2</li>
<li class="important item">3</li>
<li class="important">4</li>
<li class="item">5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li class="last" id="last">10</li>
</ul>
</body>
</html>
###2.2.4 通配選擇器
> 通配選擇器（`*`）用來選擇所有元素。當然也可以選擇某個元素下的所有元素。如：
*{margin: 0;padding: 0;}
上面一行代碼大家在Reset樣式文件中經常看到，表示所有元素的margin和padding都設置為0。為了更好的說明問題，通過CSS3選擇器中的通配選擇器來改變列表中所有子項的北京色設置為`orange`
*{margin: 0;padding: 0}
.clearfix:after,.clearfix:before{display: table;content: '';}
.clearfix:after{clear: both;overflow: hidden;}
.demo{width: 250px;border: 1px solid #ccc;padding: 10px;margin: 20px auto;}
li{list-style: none;float: left;height: 20px;line-height: 20px;width: 20px;border-radius: 10px;text-align: center;background-color: #f36;color: green;margin-right: 5px;}
.demo *{background: orange;} /* 元素類名為`demo`下的所有元素都將背景色設置為橙色。*/
如下圖所示：
###2.2.5 元素選擇器
元素選擇（`E`)是CSS選擇器中最常見、最基本的選擇器。文檔的元素包括`html、body、div、p、div等`，示例中`ul、li`也屬于HTML元素。
*{margin: 0;padding: 0}
.clearfix:after,.clearfix:before{display: table;content: '';}
.clearfix:after{clear: both;overflow: hidden;}
.demo{width: 250px;border: 1px solid #ccc;padding: 10px;margin: 20px auto;}
li{list-style: none;float: left;height: 20px;line-height: 20px;width: 20px;border-radius: 10px;text-align: center;background: #f36;color: green;margin-right: 5px;}
.demo *{background: orange;}
ul{background: grey;} /* 通過ul元素選擇器改變整個列表的背景色 */
###2.2.6 ID選擇器
在使用ID選擇器(`#id`)之前，需要在HTML文檔中給對應的元素設置`id`屬性并設置其值，才能找到對應的元素。ID選擇器具有唯一性，在一個頁面中不會同事出現`id`相同的屬性值。在CSS樣式中使用`id`選擇器時，需要在`id`屬性值的前面加上`"#"`號，如（`#id`）。
*{margin: 0;padding: 0}
.clearfix:after,.clearfix:before{display: table;content: '';}
.clearfix:after{clear: both;overflow: hidden;}
.demo{width: 250px;border: 1px solid #ccc;padding: 10px;margin: 20px auto;}
li{list-style: none;float: left;height: 20px;line-height: 20px;width: 20px;border-radius: 10px;text-align: center;background: #f36;color: green;margin-right: 5px;}
.demo *{background: orange;}
ul{background: grey;}
#first{background: lime;color: #000;} /* 改變id為first的元素的背景色和文字顏色 */
#last{background: #000;color: lime;} /* 改變id為last的元素的背景色和文字顏色 */
###2.2.7 類選擇器
類選擇器(`.class`)是以獨立于文檔元素的方式來制定元素樣式。使用方法與ID選擇器及其相似，所限在HTML 給需要的元素定義`class`屬性，并為其設置屬性值。其與ID選擇器有一個很大不同之處。**類選擇器在一個頁面中可以有多個相同的類名，而ID選擇器其ID值在整個頁面中是唯一的一個。**
*{margin: 0;padding: 0}
.clearfix:after,.clearfix:before{display: table;content: '';}
.clearfix:after{clear: both;overflow: hidden;}
.demo{width: 250px;border: 1px solid #ccc;padding: 10px;margin: 20px auto;}
li{list-style: none;float: left;height: 20px;line-height: 20px;width: 20px;border-radius: 10px;text-align: center;background: #f36;color: green;margin-right: 5px;}
.demo *{background: orange;}
ul{background: grey;}
#first{background: lime;color: #000;}
#last{background: #000;color: lime;}
.item{background: green;color: #fff;font-weight: bold;} /* 通過類選擇器改變元素的樣式 */
**多類選擇器用法：通過兩個或兩個以上類選擇器合并，來定義有區別于一個類名的元素效果。**
*{margin: 0;padding: 0}
.clearfix:after,.clearfix:before{display: table;content: '';}
.clearfix:after{clear: both;overflow: hidden;}
.demo{width: 250px;border: 1px solid #ccc;padding: 10px;margin: 20px auto;}
li{list-style: none;float: left;height: 20px;line-height: 20px;width: 20px;border-radius: 10px;text-align: center;background: #f36;color: green;margin-right: 5px;}
.demo *{background: orange;}
ul{background: grey;}
#first{background: lime;color: #000;}
#last{background: #000;color: lime;}
.item{background: green;color: #fff;font-weight: bold;}
.item.important{background: red;} /* 多類選擇器用法 */
> **IE6選擇器并不支持多類名選擇器，并將以末尾類名為準。**
###2.2.8 群組選擇器
群組選擇器（`selector1,selectorN`）是將具有相同樣式的元素分組在一起，每個選擇器之間用逗號（`,`）隔開，例如：`“selector1,selector2,...,selectorN”`。這個逗號告訴瀏覽器，規則中包含多個不同的選擇器，省去逗號就變成了后代選擇器，這一點大家在使用中千萬要小心。
