CSS選擇器分類

上一節練習題：寫兩個各10條資料的清單，第一個清單字型是16px，第二個列字型大小是20px。實作方法很多，但是根據現有知識寫出來代碼會很多，是以今天我們通過學習css選擇器來簡化你的代碼。

簡單選擇器

根據标簽名、id、類名來選取。id：是标簽id的屬性值，類名：是标簽class的屬性值。

• 元素選擇器：根據标簽名來選擇html元素，如p、h1、div、input等待。

p{
 font-size:16px
}      

• id選擇器：用于選擇一個唯一進制素，css使用的時候前邊加 # ,後邊跟id值。

<div id="par"></div>

#par{
 font-size:16px;
}      

注意：id名稱不能以數字開頭。

• 類選擇器：選擇有特定class屬性的html元素，使用時在前邊加 . 符号，後邊跟類名。

<div class="par"></div>

.par{
 font-size:16px;
}      

還可以指定特定的某個元素，如：下邊執行個體指定的是p标簽上的元素。

<div class="par"></div>
<p class="par"></p>

p.par{
 font-size:16px;
}      

通用選擇器（*）:選擇頁面上的所有html元素，設定的樣式會影響全部元素。

組合類選擇器

css有四種不同的組合器：

• 後代選擇器（空格）
• 子選擇器（>）
• 相鄰兄弟選擇器（+）
• 通用兄弟選擇器（~）

執行個體：<div><p>内容</p></div>

後代選擇器：div p{ font-size:16px }

子選擇器：div > p{ font-size:16px }

相鄰兄弟選擇器：div + p{ font-size:16px }

通用兄弟選擇器：div ~ p{ font-size:16px }

僞類選擇器

可以設定滑鼠經過，元素擷取焦點，已通路過和未通路連結等設定不同樣式。

• a:hover 滑鼠懸停在連結上
• a:link 未通路的連結
• a:visited 已通路的連結
• a:active 已選擇的連結
• div:hover { }滑鼠懸停在div元素上，也可以控制滑鼠懸停元素的子元素，如：

div:hover p{ font-size:20px }            

滑鼠停在div上時，子元素p中文字變為20像素。

僞元素選擇器

僞元素用于設定元素指定部分的樣式，如元素首行、之前、之後等插入内容。

如給div元素内的内容之後加一個對号，我們可以不用圖檔，直接使用僞元素，如：

div::after{
 content: '\2714';
 color: #fff;
}      

div::before{ } 在元素之前加入内容

p::first-line 文本的首行添加樣式或内容

屬性選擇器

• a[target]{ background:red } /* 設定背景為紅色 */，帶有target屬性的a标簽
• a[href="http:baidu.com"]，選帶有href="http:baidu.com"的a标簽
• [title ~= 'flower' ]{ }，選取title屬性包含flower的所有元素
• [class|="top"] { }，選取class屬性以top開頭的元素，必須是完整且唯一的單詞，或者以 - 分隔開。
• [class^="top"]{ }，選取class屬性以top開頭的元素。
• [class$="top"]{ }，選取class屬性以top結尾的元素。
• [class*="top"]{ }，選取class屬性包含top的元素。