【CSS 學習】CSS 選擇器
阿新 • • 發佈：2018-12-26
以下總結內容摘自 《移動Web前端高效開發實戰》
基本選擇器
| 選擇器 | 名 稱 | 實 例 | 描 述 | 版 本 |
|---|---|---|---|---|
| * | 通用選擇器（Universal selectors） | * |
匹配所有的元素 | 2.1 |
| E | 標籤選擇器（Type selectors） | p |
匹配所有的 <p> |
1 |
| .class | 類選擇器（Class selectors） | .nav |
匹配所有 class="nav" 的元素 |
1 |
| id | ID選擇器（ID selectors） | #wrapper |
匹配所有 id="wrapper" |
1 |
| E[attr] | 屬性選擇器（Attribute selectors） | a[data-url] |
匹配所有 data-url 屬性的 <a> 的元素 |
2.1 |
| E[attr=val] | 屬性選擇器（Attribute selectors） | a[data-url='http'] |
匹配所有 data-url="http" 屬性的 <a> 的元素 |
2.1 |
| E[attr~=val] | 屬性選擇器（Attribute selectors） | a[data-url~='http'] |
匹配所有 data-urlhttp 的 <a> 元素 |
2.1 |
| E[attr|=val] | 屬性選擇器（Attribute selectors） | a[data-url|='http'] |
匹配所有 data-url 屬性以 http 開頭的 <a> 元素 |
2.1 |
| E[attr^=val] | 屬性選擇器（Attribute selectors） | a[data-url^='http'] |
匹配所有 data-url 屬性以 http 開頭的 <a> 元素 |
3 |
| E[attr$=val] | 屬性選擇器（Attribute selectors） | a[data-url$='http'] |
匹配所有 data-url 屬性以 http 結尾的 <a> 元素 |
3 |
| E[attr*=val] | 屬性選擇器（Attribute selectors） | a[data-url*='http'] |
匹配所有 data-url 屬性包含 http 的 <a> 元素 |
3 |
| E F | 後代選擇器（Descendant selectors） | div p |
匹配所有 <div> 元素下所有 <p> 元素 |
1 |
| E > F | 子選擇器（Child selectors） | div p |
匹配所有 <div> 元素下所有子 <p> 元素 |
2.1 |
| E + F | 相鄰兄弟選擇器 | label + input |
匹配所有<label> 元素同級的第一個 <input> 元素 |
2.1 |
| E ~ F | 兄弟選擇器 | label ~ input |
匹配所有<label> 元素同級的所有 <input> 元素 |
3 |
| S1,S2,….. | 選擇器分組 | label,input |
匹配所有<label>,<input>元素 |
1 |
偽類和偽元素
偽類（Pseudo-classes）用於指定選擇器的某種特定狀態或條件，偽類在 DOM 中並不存在，但對使用者卻是可見的。
動態偽類（Dynamic pseudo-classes）
動態偽類對除了其名稱、屬性或內容之外的特性的元素進行分類，不會顯示在文件源或文樹中。
| 選擇器 | 實 例 | 描 述 | 版 本 |
|---|---|---|---|
| :link | a:link |
匹配未被訪問的連結 | 1 |
| :visited | a:visited |
匹配被訪問過的連結 | 1 |
| :hover | a:hover |
匹配滑鼠指標在其浮動的元素 | 1 |
| :active | a:active |
匹配滑鼠指標在其上按下的元素 | 1 |
| :focus | input:focus |
匹配獲得焦點的元素 | 2.1 |
目標偽類（The target pseudo-classes）
目標偽類指定當前活動的錨，使用目標偽類可以為活動的錨設定樣式。
| 選擇器 | 實 例 | 描 述 | 版 本 |
|---|---|---|---|
| :target | #tab1:target |
匹配活動的錨 | 3 |
語言偽類（The language pseudo-classes）
語言偽類向帶有指定 lang 屬性元素新增樣式。
| 選擇器 | 實 例 | 描 述 | 版 本 |
|---|---|---|---|
| :lang(val) | #p:lang(en) |
匹配帶有指定 lange="en" 的 <p> 元素 |
3 |
UI元素狀態偽類（The UI element states pseudo-classes）
UI元素狀態偽類主要用於指定表單中的元素狀態。
| 選擇器 | 實 例 | 描 述 | 版 本 |
|---|---|---|---|
| :enabled | input:enabled |
匹配啟動的元素 | 3 |
| :disabled | input:disabled |
匹配禁用的元素 | 3 |
| :checked | input:checked |
匹配被選中的元素 | 3 |
display和visibility屬性對於UI元素狀態偽類匹配enabled/disabled狀態沒有影響。
結構性偽類（Structural pseudo-classes）
結構性偽類用於指定文件的特定結構。
| 選擇器 | 實 例 | 描 述 | 版 本 |
|---|---|---|---|
| :root | :root |
匹配文件的根元素 | 3 |
| :nth-child(n) | :nth-child(n) |
匹配其父元素的第 n 個子元素 | 3 |
| :nth-last-child(n) | :nth-last-child(n) |
匹配其父類倒數第 n 個子元素 | 3 |
| :nth-of-type(n) | :nth-of-type(n) |
匹配其父類第 n 個有著相同選擇器的子元素 | 3 |
| :nth-last-of-type(n) | :nth-last-of-type(n) |
匹配其父類倒數第 n 個有著相同選擇器的子元素 | 3 |
| :first-child | :first-child |
匹配其父類元素的第一個子元素 | 3 |
| :last-child | :last-child |
匹配其父類元素的最後一個子元素 | 3 |
| :last-child | :last-child |
匹配其父類元素的最後一個子元素 | 3 |
| :first-of-type | :first-of-type |
匹配其父類元素第一個有著相同選擇器的子元素 | 3 |
| :last-of-type | :first-of-type |
匹配其父類元素最後一個有著相同選擇器的子元素 | 3 |
| :only-child | :only-child |
匹配其父類的唯一子元素 | 3 |
| :only-of-type | :only-child |
匹配其父類的唯一有著相同選擇器的子元素 | 3 |
| :empty | :empty |
匹配沒有子元素（包括文位元組點）的元素 | 3 |
:nth-child(n)、:nth-last-child(n)、:nth-of-type(n)、:nth-last-of-type(n)中 n 是從 0 開始的整數，表示式可寫成an+b， a 和 b 是 0 或正整數，表示式的寫法相當於把每 a 個子元素分成一組，取每組的第 b 個元素；取第奇數、偶數個子元素可寫表示式為2n+1 或 even、2n 或 odd。
否定偽類是用來選擇所有非指定型別元素的其他元素。
| 選擇器 | 實 例 | 描 述 | 版 本 |
|---|---|---|---|
| :not(s) | input:not([type="text"]) |
匹配所有非指定型別的其他元素 | 3 |
偽元素
偽元素（Pseudo-elements）是指不存在與文件樹中的抽象。
| 選擇器 | 實 例 | 描 述 | 版 本 |
|---|---|---|---|
| ::first-line | ::first-line |
匹配元素文字內容的首行 | 1 |
| ::first-letter | ::first-letter |
匹配元素文字內容的首個字母 | 1 |
| ::before | ::before |
元素之前 | 2.1 |
| ::after | ::after |
元素之後 | 2.1 |
在 CSS 1 和 CSS 2 中，偽類選擇器中只有一個 “:”，而 CSS 3 變為兩個 “::”，是為了區分偽類與偽元素，目前這兩個寫法效果一致。
::before與::after必須設定content屬性，否則元素不能生效。
優先順序和權重
CSS 中的權重分別為 4 個等級：
- 內聯樣式（HTML 文件中的 style 屬性）
- ID 選擇器
- 類、偽類、屬性選擇器
- 元素、偽類元素
這 4 個等級由高到低代表不同的優先順序，!important 寫在 CSS 規則後，可以將對應的規則提升到最高權重。