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
發表迴響