學習要點： 1.選擇器總匯 2.基本選擇器 3.複合選擇器 4.偽元素選擇器 主講教師：李炎恢 本章主要探討 HTML5 中 CSS 選擇器，通過選擇器定位到想要設置樣式的元素。目前 CSS 選擇器的版本已經升級至第三代，即 CSS3 選擇器。CSS3 選擇器提供了更多、更豐富的選擇器方式，主要分為 ...
學習要點：
1.選擇器總匯
2.基本選擇器
3.複合選擇器
4.偽元素選擇器
主講教師：李炎恢
本章主要探討 HTML5 中 CSS 選擇器，通過選擇器定位到想要設置樣式的元素。目前 CSS 選擇器的版本已經升級至第三代，即 CSS3 選擇器。CSS3 選擇器提供了更多、更豐富的選擇器方式，主要分為三大類。
一．選擇器總匯
本節課主要涉及到三種選擇器：基本選擇器、複合選擇器和偽元素選擇器，具體如下：
|
選擇器 |
名稱 |
說明 |
CSS 版本 |
|
* |
通用選擇器 |
選擇所有元素 |
2 |
|
<type> |
元素選擇器 |
選擇指定類型的元素 |
1 |
|
#<id> |
id 選擇器 |
選擇指定 id 屬性的元素 |
1 |
|
.<class> |
class 選擇器 |
選擇指定 class 屬性的元素 |
1 |
|
[attr]系列 |
屬性選擇器 |
選擇指定 attr 屬性的元素 |
2 ~ 3 |
|
s1,s2,s3... |
分組選擇器 |
選擇多個選擇器的元素 |
1 |
|
s1 s2 |
後代選擇器 |
選擇指定選擇器的後代元素 |
1 |
|
s1 > s2 |
子選擇器 |
選擇指定選擇器的子元素 |
2 |
|
s1 + s2 |
相鄰兄弟選擇器 |
選擇指定選擇器相鄰的元素 |
2 |
|
s1 ~ s2 |
普通兄弟選擇器 |
選擇指定選擇器後面的元素 |
3 |
|
::first-line |
偽元素選擇器 |
選擇塊級元素文本的首行 |
1 |
|
::first-letter |
偽元素選擇器 |
選擇塊級元素文本的首字母 |
1 |
|
::before |
偽元素選擇器 |
選擇元素之前插入內容 |
2 |
|
::after |
偽元素選擇器 |
選擇元素之後插入內容 |
2 |
二．基本選擇器
使用簡單且頻率高的一些選擇器歸類為基本選擇器。
1.通用選擇器
* { border: 1px solid red; }
解釋：“*”號選擇器是通用選擇器，功能是匹配所有 html 元素的選擇器包括<html>和<body>標簽。可以使用如下元素標記測試效果：
<p>段落</p>
<b>加粗</b>
<span>無</span>
通用選擇器會將所有元素匹配並配置樣式，這是把雙刃劍，好處就是非常方便，壞處就是將不必要的元素也配置了。目前為止，還不存在所有元素都必須配置的樣式，所以，一般來說，不常用。
2.元素選擇器
p { color: red; }
<p>段落</p>
解釋：直接使用元素名稱作為選擇器名即可。
3.ID 選擇器
#abc { font-size: 20px; }
<p id="abc">段落</p>
解釋：通過對元素設置全局屬性 id，然後使用#id 值來選擇頁面唯一元素。
4.類選擇器
.abc { border: 1px solid red; }
<b class="abc">加粗</b>
<span class="abc">無</span>
解釋：通過對元素設置全局屬性 class，然後使用.class 值選擇頁面一個或多個元素。
b.abc { border: 1px solid red; }
解釋：也可以使用“元素.class 值”的形式，限定某種類型的元素。
<span class="abc edf">無</span>
解釋：類選擇器還可以調用多個樣式，中間用空格隔開進行層疊。
5.屬性選擇器
//所需 CSS2 版本
[href] { color: orange; }
解釋：屬性選擇器，直接通過兩個中括弧裡面包含屬性名即可。當然，還有更多擴展的屬性選擇器。
//所需 CSS2 版本
[type="password"] { border: 1px solid red; }
解釋：匹配屬性值的屬性選擇器。
//所需版本 CSS3
[href^="http"] { color: orange; }
解釋：屬性值開頭匹配的屬性選擇器。
//所需版本 CSS3
[href$=".com"] { color: orange; }
解釋：屬性值結尾匹配的屬性選擇器。
//所需版本 CSS3
[href*="baidu"] { color: orange; }
解釋：屬性值包含指定字元的屬性選擇器。
//所需版本 CSS2
[class~="edf"] { font-size: 50px; }
解釋：屬性值具有多個值時，匹配其中一個值的屬性選擇器。
//所需版本 CSS2
[lang|="en"] { color: red; }
解釋：屬性值具有多個值且使用“-”號連接符分割的其中一個值的屬性選擇器。比如
<i lang="en-us">HTML5</i>
二．複合選擇器
將不同的選擇器進行組合形成新的特定匹配，我們稱為複合選擇器。
1.分組選擇器
p,b,i,span { color: red; }
解釋：將多個選擇器通過逗號分割，同時設置一組樣式。當然，不但可以分組元素選擇器，還可以使用 ID 選擇器、類選擇器、屬性選擇器混合使用。
2.後代選擇器
p b { color: red; }
解釋：選擇<p>元素內部所有<b>元素。不在乎<b>的層次深度。當然，後代選擇器也可以混合使用 ID 選擇器、類選擇器、屬性選擇器。
3.子選擇器
ul > li { border: 1px solid red; }
<ul> <li> 我是兒子 <ol> <li> 我是孫子 </li> <li> 我是孫子 </li> </ol> </li> <li> 我是兒子 </li> <li> 我是兒子 </li> </ul>
解釋：子選擇器類似與後代選擇器，而最大的區別就是子選擇器只能選擇父元素向下一級的元素，不可以再往下選擇。
4.相鄰兄弟選擇器
p + b { color: red; }
解釋：相鄰兄弟選擇器匹配和第一個元素相鄰的第二個元素。
5.普通兄弟選擇器
p ~ b { color: red; }
解釋：普通兄弟選擇器匹配和第一個元素後面的所有元素。
三．偽元素選擇器
偽選擇器分為兩種第一種是下節偽類選擇器，還有一種就是偽元素選擇器。這兩種選擇器特性上比較容易混淆，在 CSS3 中為了區分，偽元素前置兩個冒號（::），偽類前置一個冒號（:）。
1.::first-line 塊級首行
::first-line { color: red; }
解釋：塊級元素比如<p>、<div>等的首行文本被選定。如果想限定某種元素，可以加上前置 p::first-line。
2.::first-letter 塊級首字母
::first-letter { color: red; }
解釋：塊級元素的首行字母。
3.::before 文本前插入
a::before { content: '點擊-'; }
解釋：在文本前插入內容。
4.::after 文本後插入
a::before { content: '-請進'; }
解釋：在文本後插入內容。
