# html+css基礎學習筆記－選擇器介紹
阿新 • • 發佈：2019-01-07
選擇器分類：
- 標籤選擇器：標籤名{}，作用於所有此標籤。
- 類選擇器： .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標籤
包含(後代)選擇器
包含選擇器，即加入空格,用於選擇指定標籤元素下的後輩元素。如右側程式碼編輯器中的程式碼：
.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;}