? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 開(kāi)篇第八章
1、什么是選擇器？
每一條css樣式聲明（定義）由兩部分組成，形式如下：
選擇器{
? ? 樣式;
}
在{}之前的部分就是“選擇器”，“選擇器”指明了{(lán)}中的“樣式”的作用對(duì)象，也就是“樣式”作用于網(wǎng)頁(yè)中的哪些元素。比如右側(cè)代碼編輯器中第7行代碼中的“body”就是選擇器。
2、標(biāo)簽選擇器
標(biāo)簽選擇器其實(shí)就是html代碼中的標(biāo)簽。如右側(cè)代碼編輯器中的<html><body><p><h1><img>標(biāo)簽。
3、類選擇器
類選擇器在css樣式編碼中是最常用到的，如右側(cè)代碼編輯器中的代碼:可以實(shí)現(xiàn)為“膽小如鼠”、“勇氣”字體設(shè)置為紅色。
語(yǔ)法：.類選擇器名稱{css樣式代碼；}
注意：
1、英文圓點(diǎn)開(kāi)頭
2、其中類選器名稱可以任意起名（但不要起中文噢）
使用方法：
第一步：使用合適的標(biāo)簽把要修飾的內(nèi)容標(biāo)記起來(lái)，如下：
<span>要修飾的內(nèi)容</span>
第二步：使用class="類選擇器名稱"為標(biāo)簽設(shè)置一個(gè)類，如下：
<span ? ? class="stress">要修飾的內(nèi)容</span>
第三步：設(shè)置類選器css樣式，如下：
.stress{color:red;}/*類前面要加入一個(gè)英文圓點(diǎn)*/
4、ID選擇器
在很多方面，ID選擇器都類似于類選擇符，但也有一些重要的區(qū)別：
1、為標(biāo)簽設(shè)置id="ID名稱"，而不是class="類名稱"。
2、ID選擇符的前面是井號(hào)（#）號(hào)，而不是英文圓點(diǎn)（.）。
5、類和ID選擇器的區(qū)別
學(xué)習(xí)了類選擇器和ID選擇器，我們會(huì)發(fā)現(xiàn)他們之間有很多的相似處，是不是兩者可以通用呢？我們不要著急先來(lái)總結(jié)一下他們的相同點(diǎn)和不同點(diǎn)：
相同點(diǎn)：可以應(yīng)用于任何元素
不同點(diǎn)：
1、ID選擇器只能在文檔中使用一次。與類選擇器不同，在一個(gè)HTML文檔中，ID選擇器只能使用一次，而且僅一次。而類選擇器可以使用多次。
2、可以使用類選擇器詞列表方法為一個(gè)元素同時(shí)設(shè)置多個(gè)樣式。我們可以為一個(gè)元素同時(shí)設(shè)多個(gè)樣式，但只可以用類選擇器的方法實(shí)現(xiàn)，ID選擇器是不可以的（不能使用 ID 詞列表）。
6、子選擇器
還有一個(gè)比較有用的選擇器子選擇器，即大于符號(hào)(>),用于選擇指定標(biāo)簽元素的第一代子元素。如右側(cè)代碼編輯器中的代碼：
.food>li{border=1px ? ? solid ? ? red;}
這行代碼會(huì)使class名為food下的子元素li（水果、蔬菜）加入紅色實(shí)線邊框。
7、包含(后代)選擇器
包含選擇器，即加入空格,用于選擇指定標(biāo)簽元素下的后輩元素。如右側(cè)代碼編輯器中的代碼：.first span{color:red;}
這行代碼會(huì)使第一段文字內(nèi)容中的“膽小如鼠”字體顏色變?yōu)榧t色。
請(qǐng)注意這個(gè)選擇器與子選擇器的區(qū)別，子選擇器（child selector）僅是指它的直接后代，或者你可以理解為作用于子元素的第一代后代。而后代選擇器是作用于所有子后代元素。后代選擇器通過(guò)空格來(lái)進(jìn)行選擇，而子選擇器是通過(guò)“>”進(jìn)行選擇。
總結(jié)：>作用于元素的第一代后代，空格作用于元素的所有后代。
8、通用選擇器
通用選擇器是功能最強(qiáng)大的選擇器，它使用一個(gè)（*）號(hào)指定，它的作用是匹配html中所有標(biāo)簽元素，如下使用下面代碼使用html中任意標(biāo)簽元素字體顏色全部設(shè)置為紅色：
*{color:red;}
9、偽類選擇符
更有趣的是偽類選擇符，為什么叫做偽類選擇符，它允許給html不存在的標(biāo)簽（標(biāo)簽的某種狀態(tài)）設(shè)置樣式，比如說(shuō)我們給html中一個(gè)標(biāo)簽元素的鼠標(biāo)滑過(guò)的狀態(tài)來(lái)設(shè)置字體顏色：
a ?hover{color:red;}
上面一行代碼就是為 a 標(biāo)簽鼠標(biāo)滑過(guò)的狀態(tài)設(shè)置字體顏色變紅。這樣就會(huì)使第一段文字內(nèi)容中的“膽小如鼠”文字加入鼠標(biāo)滑過(guò)字體顏色變?yōu)榧t色特效。
關(guān)于偽選擇符：
關(guān)于偽類選擇符，到目前為止，可以兼容所有瀏鑒器的“偽類選擇符”就是 a 標(biāo)簽上使用 :hover 了（其實(shí)偽類選擇符還有很多，尤其是 css3 中，但是因?yàn)椴荒芗嫒菟袨g覽器，本教程只是講了這一種最常用的）。其實(shí) :hover 可以放在任意的標(biāo)簽上，比如說(shuō) p:hover，但是它們的兼容性也是很不好的，所以現(xiàn)在比較常用的還是 a:hover 的組合。
10、分組選擇符
當(dāng)你想為html中多個(gè)標(biāo)簽元素設(shè)置同一個(gè)樣式時(shí)，可以使用分組選擇符（，），如下代碼為右側(cè)代碼編輯器中的h1、span標(biāo)簽同時(shí)設(shè)置字體顏色為紅色：
h1,span{color:red;}
