什麼是選擇器？
每一條CSS樣式聲明（定義）由兩部分組成，形式如下：
選擇器｛
樣式；
｝
選擇器，說白了就是用一種方式把你想要的哪一個標籤選中!
標籤選擇器
標籤選擇器其實就是html代碼中的標籤。例如：
p{font-size:12px;line-height:1.6em;};
類選擇器
類選擇器在CSS樣式編碼中是最常用到的。
語法：
．類選擇器名稱｛css樣式代碼；｝
注意：
- 英文圓點開頭
- 其中類選擇器可以任意起名
<span class="stress">膽小如鼠</span>
.setGreen{
color:green;
}
ID選擇器
在很多方面，ID選擇器都類似於類選擇符，但也有一些重要的區別：
- 爲標籤設置id＝＂ID名稱＂，而不是class＝”類名稱“
- ID選擇符的前面是井號（＃），而不是英文圓點（．）
<span id="setGreen">公開課</span>
#setGreen{
color:green;
}
類和ID選擇器的區別？
相同點：可以應用於任何元素
不同點：
- 在一個html文檔中，ID選擇器只能使用一次，而且僅一次。而類選擇器可以使用多少次。
- 可以使用類選擇器詞列表方法爲一個元素同時設置多個樣式。我們可以爲一個元素同時設多個樣式，但只可以用類選擇器的方法實現，ID選擇器是不可以的（不能使用ID詞列表）
錯誤代碼：
#stressid{
color:red;
}
#bigsizeid{
font-size:25px;
}
<p>到了<span id="stressid bigsizeid">三年級</span>下學期時，我們班上了一節公開課...</p>
子選擇器
還有一個比較有用的選擇器子選擇器，即大於符號（>),用於選擇指定標籤元素的第一代子元素。
如：
.food>li{border:1px solid red;}
這行代碼會使class名爲food下的子元素li（水果、蔬菜）加入紅色實線邊框。
包含（後代）選擇器
包含選擇器，即加入空格,用於選擇指定標籤元素下的後輩元素。
如：
.first span{color:red;}
包含選擇器與子選擇器的區別？
子選擇器（child selector）僅是指它的直接後代，或者可以理解爲作用於子元素的第一代後代。
而後代選擇器是作用於所有子後代元素。
而後代選擇器是作用於所有子後代元素。（>作用於元素的第一後代，空格作用於元素所有後代）
.food>li{
border:1px solid red;/*添加邊框樣式（粗細爲1px， 顏色爲紅色的實線）*/
}
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>蘋果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>捲心菜</li>
</ul>
</li>
</ul>
.food li{
border:1px solid red;/*添加邊框樣式（粗細爲1px， 顏色爲紅色的實線）*/
}
通用選擇器
通用選擇器是功能最強大的選擇器，它使用一個（*）號指定，它的作用是匹配html中所有標籤元素，如下使用下面代碼使用html中任意標籤元素字體顏色全部設置爲紅色：
* {color:red;}