CSS 虛擬 (偽) 類別選擇器 (Selector) 教學範例
「CSS 虛擬 (偽) 類別」為較特殊的選擇器，它是依據狀況或狀態來選擇元素的，例如選取已訪問連結、選取一群元素內的第三個元素或者選取使用者選擇的 UI (表單) 元素。
CSS 所有選擇器：
E 為 Element (元素) 的簡稱，表示 HTML 的標籤名稱如 <h1> <p> <div> ...F 也是 Element，在同時講解二個元素時CSS 虛擬（偽）類別列表
點擊選擇器可連結至詳細說明範例
| 選擇器 | 名稱 | 說明 | CSS |
|---|---|---|---|
:link | 連結偽類 | 未訪問過的連結 | 1 |
:visited | 連結偽類 | 已訪問過的連結 | 1 |
:hover | 使用者操作偽類 | 滑鼠游標懸停至元素上 | 2 |
:focus | 使用者操作偽類 | 獲得焦點的元素 | 2 |
:active | 使用者操作偽類 | 點擊元素時 | 2 |
:target | 目標偽類 | 錨點的目標元素 | 3 |
:root | 結構性偽類 | 根元素 | 3 |
E:nth-child(n) | 結構性偽類 | 找到 E 的所有兄弟元素，然後依先後順序從 1 開始排序 (排序計算類型包含所有元素)，選取第 n 個元素 | 3 |
E:nth-last-child(n) | 結構性偽類 | 找到 E 的所有兄弟元素，然後從最後的開始依先後順序從 1 排序 (排序計算類型包含所有元素)，選取第 n 個元素 | 3 |
E:nth-of-type(n) | 結構性偽類 | 找到 E 的所有兄弟元素，然後依先後順序從 1 開始排序 (排序計算類型僅包含 E 元素)，選取第 n 個元素 | 3 |
E:nth-last-of-type(n) | 結構性偽類 | 找到 E 的所有兄弟元素，然後從最後的開始依先後順序從 1 排序 (排序計算類型僅包含 E 元素)，選取第 n 個元素 | 3 |
E:first-child | 結構性偽類 | 找到 E 的所有兄弟元素，然後選取第一個長子元素 (計算類型包含所有元素) | 2 |
E:last-child | 結構性偽類 | 找到 E 的所有兄弟元素，然後選取最後一個元素 (計算類型包含所有元素) | 3 |
E:first-of-type | 結構性偽類 | 找到 E 的所有兄弟元素，然後選取第一個長子元素 (計算類型僅包含 E 元素) | 3 |
E:last-of-type | 結構性偽類 | 找到 E 的所有兄弟元素，然後選取最後一個元素 (計算類型僅包含 E 元素) | 3 |
E:only-child | 結構性偽類 | 沒有任何兄弟的 E 元素 (計算類型包含所有元素) | 3 |
E:only-of-type | 結構性偽類 | 沒有任何兄弟的 E 元素 (計算類型僅包含 E 元素) | 3 |
E:empty | 結構性偽類 | 沒有任何子元素的 E 元素 | 3 |
E:lang(charset) | 語言偽類 | E 元素有 lang 語言的屬性，並且啟始值等於 charset 或 charset- | 3 |
E:enabled | UI 元素狀態偽類 | UI 為啟用的元素 | 3 |
E:disabled | UI 元素狀態偽類 | UI 為禁用的元素 | 3 |
E:checked | UI 元素狀態偽類 | 使用者選擇的 UI 元素 | 3 |
:not(s) | 否定偽類 | 不匹配 s 的元素 | 3 |
連結與使用者操作偽類
「連結偽類」與「使用者操作偽類」一起使用時，請注意順序。例如指定 a 連結元素時，必須依照使用者的動作順序：
:link:visited:hover:focus:active
範例
連結偽類
只作用在
<a> 連結。:link
選取未訪問過的連結：
.link:link {
background-color: skyblue;
}
<a href="https://footmark.info/contact/" class="link">聯絡我 | MIS 腳印</a>
:visited
選取已訪問過的連結：
.visited:visited {
background-color: skyblue;
}
<a href="https://footmark.info/" class="visited">MIS 腳印 | 記錄 IT 學習的軌跡</a>
使用者操作偽類
:hover
選取滑鼠游標懸停的元素：
.hover:hover {
background-color: skyblue;
}
<a href="https://footmark.info/" class="hover">MIS 腳印 | 記錄 IT 學習的軌跡</a>
:focus
選取具有焦點的輸入元素：
只作用在表單輸入元素。
.focus:focus {
background-color: skyblue;
}
<input type="text" class="focus">
:active
選取點擊的的元素：
只作用在表單輸入元素。
.active:active {
background-color: skyblue;
}
<a href="https://footmark.info/" class="active">MIS 腳印 | 記錄 IT 學習的軌跡</a>
目標偽類 :target
選取錨點的目標元素：
href 屬性指向錨點使用 #id 的方式。
#target:target {
background-color: skyblue;
}
<a href="#target">點擊設定的錨點</a> <p id="target">目標元素</p>
點擊設定的錨點
目標元素
結構性偽類
:root
選取根元素，也就是
html 元素：
:root {
...
}
E:nth-child(n)
n 可以是數值、關鍵字或公式。
使用「數值」方式：找到 p 的所有兄弟元素，然後依先後順序從 1 開始排序 (排序計算類型包含所有元素)，選取第 1, 2, 4 個元素：
雖然
strong 元素也包含在排序，但因為不是 p 元素，因此未被選取。
.nth-child-number p:nth-child(1),
.nth-child-number p:nth-child(2),
.nth-child-number p:nth-child(4) {
background-color: skyblue;
}
<div class="nth-child-number">
<p>1 p</p>
<strong">2 strong</strong>
<p>3 p</p>
<p>4 p</p>
<p>5 p</p>
</div>
1 p
2 strong3 p
4 p
5 p
使用「關鍵字」方式：找到
p 的所有兄弟元素，然後依先後順序從 1 開始排序 (排序計算類型包含所有元素)，選取 odd (奇數) 和 even (偶數) 的元素：
.nth-child-keyword p:nth-child(odd) {
background-color: skyblue;
}
.nth-child-keyword p:nth-child(even) {
background-color: gray;
}
<div class="nth-child-keyword">
<p>1 p</p>
<p>2 p</p>
<p>3 p</p>
<p>4 p</p>
</div>
1 p
2 p
3 p
4 p
使用「公式」方式：找到 p 的所有兄弟元素，然後依先後順序從 1 開始排序 (排序計算類型包含所有元素)，選取 (an+b) 的元素：
- an：週期 (a 為週期數，n 是規定要有的)。
- b：偏移值 (2 表示從第二個元素開始)。
.nth-child-expression p:nth-child(2n+3) {
background-color: skyblue;
}
<div class="nth-child-keyword">
<p>1 p</p>
<p>2 p</p>
<p>3 p</p>
<p>4 p</p>
<p>5 p</p>
<p>6 p</p>
<p>7 p</p>
</div>
1 p
2 p
3 p
4 p
5 p
6 p
7 p
E:nth-last-child(n)
同
E:nth-child(n)，只是排序元素從最後的開始。E:nth-of-type(n)
n 可以是數值、關鍵字或公式。
使用「數值」方式：找到
p 的所有兄弟元素，然後依先後順序從 1 開始排序 (排序計算類型僅包含 p 元素)，選取第 1, 2, 4 個元素：排序計算類型僅包含
p 元素，因此 strong 元素不在排序的順序內。
.nth-of-type-number p:nth-of-type(1),
.nth-of-type-number p:nth-of-type(2),
.nth-of-type-number p:nth-of-type(4) {
background-color: skyblue;
}
<div class="nth-of-type-number">
<p>1 p</p>
<strong">1 strong</strong>
<p>2 p</p>
<p>3 p</p>
<p>4 p</p>
</div>
1 p
1 strong2 p
3 p
4 p
使用「關鍵字」方式：找到
p 的所有兄弟元素，然後依先後順序從 1 開始排序 (排序計算類型僅包含 p 元素)，選取 odd (奇數) 和 even (偶數) 的元素：排序計算類型僅包含
p 元素，因此 strong 元素不在排序的順序內。
.nth-of-type-keyword p:nth-of-type(odd) {
background-color: skyblue;
}
.nth-of-type-keyword p:nth-of-type(even) {
background-color: gray;
}
<div class="nth-of-type-keyword">
<p>1 p</p>
<strong">1 strong</strong>
<p>2 p</p>
<p>3 p</p>
<p>4 p</p>
</div>
1 p
1 strong2 p
3 p
4 p
使用「公式」方式：找到 p 的所有兄弟元素，然後依先後順序從 1 開始排序 (排序計算類型僅包含 p 元素)，選取 (an+b) 的元素：
- an：週期 (a 為週期數，n 是規定要有的)。
- b：偏移值 (2 表示從第二個元素開始)。
排序計算類型僅包含
p 元素，因此 strong 元素不在排序的順序內。
.nth-of-type-expression p:nth-of-type(2n+3) {
background-color: skyblue;
}
<div class="nth-of-type-keyword">
<p>1 p</p>
<strong">1 strong</strong>
<p>2 p</p>
<p>3 p</p>
<p>4 p</p>
<p>5 p</p>
<p>6 p</p>
<p>7 p</p>
</div>
1 p
1 strong2 p
3 p
4 p
5 p
6 p
7 p
E:nth-last-of-type(n)
同
E:nth-of-type(n)，只是排序元素從最後的開始。E:first-child
找到 E 的所有兄弟元素，然後選取第一個長子元素 (計算類型包含所有元素)：
計算類型包含所有元素，因此
strong 元素也在排序內，但是 strong 元素放在第一個也不會被選取，因為它不是 p 元素。
.first-child p:first-child {
background-color: skyblue;
}
<div class="first-child">
<p>1 p</p>
<strong">2 strong</strong>
<p>3 p</p>
<p>4 p</p>
<p>5 p</p>
</div>
1 p
2 strong3 p
4 p
5 p
E:last-child
同
E:first-child，只是選取的元素是最後一個。E:first-of-type
找到
p 的所有兄弟元素，然後選取第一個長子元素 (計算類型僅包含 p 元素)：計算類型僅包含
p 元素，因此 strong 元素不在排序內，所以選取的是第一個 p 元素。
.first-of-type p:first-of-type {
background-color: skyblue;
}
<div class="first-of-type">
<strong">1 strong</strong>
<p>1 p</p>
<p>2 p</p>
<p>3 p</p>
<p>4 p</p>
</div>
1 strong
1 p
2 p
3 p
4 p
E:last-of-type
同
E:first-of-type，只是選取的元素是最後一個。E:only-child
選取沒有任何兄弟的
p 元素 (計算類型包含所有元素)：
.only-child p:only-child {
background-color: skyblue;
}
<div class="only-child">
<p>1 p</p>
</div>
<div class="only-child">
<p>1 p</p>
<p>2 p</p>
</div>
<div class="only-child">
<strong>1 strong</strong>
<p>2 p</p>
</div>
1 p
1 p
2 p
1 strong
2 p
E:only-of-type
選取沒有任何兄弟的
p 元素 (計算類型僅包含 p 元素)：
.only-of-type p:only-of-type {
background-color: skyblue;
}
<div class="only-of-type">
<p>1 p</p>
</div>
<div class="only-of-type">
<p>1 p</p>
<p>2 p</p>
</div>
<div class="only-of-type">
<strong>1 strong</strong>
<p>2 p</p>
</div>
1 p
1 p
2 p
1 strong
2 p
E:empty
選取沒有任何子元素的
div 元素：- 子元素：包含 HTML Tag、文字節點、空格。
- <-- 註解 -->：不是子元素。
.empty {
height: 20px;
}
.empty:empty {
background-color: skyblue;
}
<div class="empty"></div> <div class="empty">div</div> <div class="empty"> </div> <div class="empty"><!-- 註解 --></div>
div
語言偽類 E:lang
選取
p 元素有 lang 語言的屬性，並且啟始值等於 zh 或 zh-：
.lang:lang(zh) {
background-color: skyblue;
}
<p class="lang" lang="zh">lang="zh"</p> <p class="lang" lang="zh-">lang="zh-"</p> <p class="lang" lang="zh-tw">lang="zh-tw"</p> <p class="lang" lang="en">lang="en"</p>
lang="zh"
lang="zh-"
lang="zh-tw"
lang="en"
UI 元素狀態偽類
UI (使用者介面，User Interface) 指的是表單元素，如 <input type="text">、<select>。
E:enabled
選取 UI 為啟用的元素：
.enabled:enabled {
background-color: skyblue;
}
<input type="text" class="enabled" value="enabled"> <input type="text" class="enabled" value="disabled" disabled>
E:disabled
選取 UI 為禁用的元素：
.disabled:disabled {
background-color: skyblue;
}
<input type="text" class="disabled" value="enabled"> <input type="text" class="disabled" value="disabled" disabled>
E:checked
選取使用者選擇的 UI 元素，可被選擇的元素如下：
- 單選鈕：
<input type="radio"> - 複選鈕：
<input type="checkbox"> - 選單列：
<select><option><option></select>
input.checked:checked {
height: 30px;
width: 30px;
}
select.checked option:checked {
background-color: skyblue;
}
<input type="radio" class="checked" name="radio"> 選我
<input type="radio" class="checked" name="radio" checked> 選我
<input type="checkbox" class="checked" name="checkbox"> 選我
<input type="checkbox" class="checked" name="checkbox" checked> 選我
<select class="checked">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected>3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
否定偽類 :not(s)
選取
.not 內，不是 p 的所有元素：
.not *:not(p) {
background-color: skyblue;
}
<div class="not">
<strong>strong</strong>
<p>p</p>
<span>span<span>
</div>
strong
p
span
發表迴響