LOGO

MIS 腳印

記錄 IT 學習的軌跡

關於我 聯絡我

CSS 虛擬 (偽) 類別選擇器 (Selector) 教學範例

「CSS 虛擬 (偽) 類別」為較特殊的選擇器，它是依據狀況或狀態來選擇元素的，例如選取已訪問連結、選取一群元素內的第三個元素或者選取使用者選擇的 UI (表單) 元素。

CSS

CSS 所有選擇器：

CSS 虛擬（偽）類別列表

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 連結元素時，必須依照使用者的動作順序：

  1. :link
  2. :visited
  3. :hover
  4. :focus
  5. :active

範例

連結偽類

:link

選取未訪問過的連結：
.link:link {
    background-color: skyblue;
}

<a href="https://footmark.info/contact/" class="link">聯絡我 | MIS 腳印</a>
聯絡我 | MIS 腳印

:visited

選取已訪問過的連結：
.visited:visited {
    background-color: skyblue;
}

<a href="https://footmark.info/" class="visited">MIS 腳印 | 記錄 IT 學習的軌跡</a>
MIS 腳印 | 記錄 IT 學習的軌跡

使用者操作偽類

:hover

選取滑鼠游標懸停的元素：
.hover:hover {
    background-color: skyblue;
}

<a href="https://footmark.info/" class="hover">MIS 腳印 | 記錄 IT 學習的軌跡</a>
MIS 腳印 | 記錄 IT 學習的軌跡

: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>
MIS 腳印 | 記錄 IT 學習的軌跡

目標偽類 :target

選取錨點的目標元素：
#target:target {
    background-color: skyblue;
}

<a href="#target">點擊設定的錨點</a>
<p id="target">目標元素</p>
點擊設定的錨點

目標元素

結構性偽類

:root

選取根元素，也就是 html 元素：
:root {
    ...
}

E:nth-child(n)

使用「數值」方式：找到 p 的所有兄弟元素，然後依先後順序從 1 開始排序 (排序計算類型包含所有元素)，選取第 1, 2, 4 個元素：

.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 strong

3 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)

使用「數值」方式：找到 p 的所有兄弟元素，然後依先後順序從 1 開始排序 (排序計算類型僅包含 p 元素)，選取第 1, 2, 4 個元素：
.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 strong

2 p

3 p

4 p

使用「關鍵字」方式：找到 p 的所有兄弟元素，然後依先後順序從 1 開始排序 (排序計算類型僅包含 p 元素)，選取 odd (奇數) 和 even (偶數) 的元素：
.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 strong

2 p

3 p

4 p

使用「公式」方式：找到 p 的所有兄弟元素，然後依先後順序從 1 開始排序 (排序計算類型僅包含 p 元素)，選取 (an+b) 的元素：

  • an：週期 (a 為週期數，n 是規定要有的)。
  • b：偏移值 (2 表示從第二個元素開始)。
.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 strong

2 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 的所有兄弟元素，然後選取第一個長子元素 (計算類型包含所有元素)：
.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 strong

3 p

4 p

5 p

E:last-child

同 E:first-child，只是選取的元素是最後一個。

E:first-of-type

找到 p 的所有兄弟元素，然後選取第一個長子元素 (計算類型僅包含 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

參考

在〈“CSS 虛擬 (偽) 類別選擇器 (Selector) 教學範例”〉中有 1 則留言

  1. [CSS]D001-基礎 | Daily UI/UX challenges表示:
    2019-11-2915:53:15

    […] 補充：CSS 虛擬 (偽) 類別選擇器 (Selector) 教學範例 […]

    回覆

發表迴響