選擇器分類：
- 標籤選擇器：標籤名{}，作用於所有此標籤。
- 類選擇器： .class{}，在標籤內定義class=”“，屬圖形結構。
- ID選擇器：#ID{}, 在標籤內定義id=”“，有嚴格的一一對應關係。
- 子選擇器：.span>li{}，作用於父元素span類下一層的li標籤。
- 包含選擇器：.span li{}，作用於父元素span下所有li標籤。
- 通用選擇器：*{}，匹配所有html的標籤元素。
- 僞類選擇符：標籤的某種狀態設置
- 分組選擇符：分組快速定義
標籤選擇器
標籤選擇器其實就是html代碼中的標籤。例如<html>、<body>、<h1>、<p>、<img></code>例如下面代碼：
p{
font-size:12px;
line-height:1.6em;
}ID選擇器
#.類選器名稱{css樣式代碼;}
#setGreen{
color:green;
}
<span id="setGreen">公開課</span>
類選擇器
#類選器名稱{css樣式代碼;}
.stress{
color:red;
}/*類前面要加入一個英文圓點*/
<span class="stress">膽小如鼠</span>類選擇器和ID選擇器的區別
- ID選擇器只能在文檔中使用一次。
- 可以使用類選擇器詞列表方法爲一個元素同時設置多個樣式。
子選擇器
即大於符號(>),用於選擇指定標籤元素的第一代子元素。如右側代碼編輯器中的代碼：
.food>li{
border:1px solid red;
}
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>蘋果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>捲心菜</li>
</ul>
</li>
說明：
香蕉，蘋果層面的li標籤沒有起作用，作用於第一層li標籤
包含(後代)選擇器
包含選擇器，即加入空格,用於選擇指定標籤元素下的後輩元素。如右側代碼編輯器中的代碼：
.first span{
color:red;
}
.food li{
border:1px solid red;/*添加邊框樣式（粗細爲1px， 顏色爲紅色的實線）*/
}
<p class="first">三年級時，我還是一個<span>膽小如鼠</span>的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來<span>回答老師提出的問題。</span>學校舉辦的活動我也沒勇氣參加。</p>
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>蘋果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>捲心菜</li>
</ul>
</li>
</ul>
說明：
可以作用於所有的ｌｉ標籤
子選擇器和包含選擇器的區別
子選擇器作用於元素的第一代後代
包含選擇器作用於元素的所有後代
通用選擇器
通用選擇器是功能最強大的選擇器，它使用一個（*）號指定，它的作用是匹配html中所有標籤元素，如下使用下面代碼使用html中任意標籤元素字體顏色全部設置爲紅色：
* {color:red;}僞類選擇符
它允許給html不存在的標籤（標籤的某種狀態）設置樣式，比如說我們給html中一個標籤元素的鼠標滑過的狀態來設置字體顏色：
a:hover{color:red;}
<p class="first">三年級時，我還是一個<a href="http://www.imooc.com">膽小如鼠</a>的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p>分組選擇符
當你想爲html中多個標籤元素設置同一個樣式時，可以使用分組選擇符（，），如下代碼爲右側代碼編輯器中的h1、span標籤同時設置字體顏色爲紅色：
h1,span{color:red;}相當於
h1{color:red;}
span{color:red;}