引言

　　如果有以下html程式碼

<div>我是div1</div>
<div>我是div2</div>
<p>我是段落</p>
<ul>
    <li>我是ul裡面的li </li>
</ul>
<ol>
    <li>我是ol裡面的li</li>
</ol>

　　怎麼通過CSS，把第一個div改成紅色，把ul裡面的li改成紅色呢。

　　這些操作就和CSS裡的選擇器相關

選擇器

　　選擇器分為基礎選擇器和複合選擇器。

　　基礎選擇器是由單個選擇器組成的，包括標籤選擇器，類選擇器，id選擇器和萬用字元選擇器。

標籤選擇器

　　標籤選擇器能把頁面中的所有該標籤選擇出來，改變樣式。

類選擇器

　　如果想差異化選擇不同的標籤，單獨選擇某一個或某幾個標籤，就可以使用類選擇器。語法：

.類名 {
    屬性1： 屬性值1；
     ...
}    

　　定義好類名後，html的標籤提供class屬性來指定樣式。

　　例如我們建立一個紅色樣式類，然後在div呼叫：

　　可以看見只有第一個div變成紅色的了

　　類選擇器是支援多類名的，好比我們同時載入多個類樣式表

　　我們在div里加載兩個class——red和font100，他們用空格隔開，可以看到他們的樣式同時被部署了

　　這裡需要注意的是如果兩個類對同一個屬性進行了配置，就按照最後的那個類為準。

ID選擇器

　　id選擇器可以為標有特定id的HTML元素指定特定的樣式。

　　格式為：

#id名 {
    屬性1： 屬性值1；
    ...
}

　　和類選擇器類似，我們可以通過設定id屬性值來引入CSS樣式

　　可以看到這裡設定的是id，不是class，效果也成功更改了

　　但要注意的是每個id值是唯一的，在整個html只能出現一次

萬用字元選擇器

　　萬用字元選擇器用*表示，它表示選取頁面中所有元素(標籤)。

　　使用起來也肥腸簡單，寫個星號然後開始配就行。

　　可以看到兩個div都配成了紅色

　　萬用字元選擇器對所有標籤產生效果，使用情況很少，一般用於設定邊距。