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

CSS

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

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 語言的屬性,並且啟始值等於 charsetcharset- 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

選取未訪問過的連結。

CSS:

.link:link {
    background-color: skyblue;
}

HTML:

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

:visited

選取已訪問過的連結。

CSS:

.visited:visited {
    background-color: skyblue;
}

HTML:

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

使用者操作偽類

:hover

選取滑鼠游標懸停的元素。

CSS:

.hover:hover {
    background-color: skyblue;
}

HTML:

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

:focus

選取具有焦點的輸入元素。

CSS:

.focus:focus {
    background-color: skyblue;
}

HTML:

<input type="text" class="focus">

:active

選取點擊的的元素。

CSS:

.active:active {
    background-color: skyblue;
}

HTML:

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

目標偽類 :target

選取錨點的目標元素。

CSS:

#target:target {
    background-color: skyblue;
}

HTML:

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

目標元素

結構性偽類

:root

選取根元素,也就是 html 元素。

CSS:

:root {
    ...
}

E:nth-child(n)

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

CSS:

.nth-child-number p:nth-child(1),
.nth-child-number p:nth-child(2),
.nth-child-number p:nth-child(4) {
    background-color: skyblue;
}

HTML:

<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 (偶數) 的元素。

CSS:

.nth-child-keyword p:nth-child(odd) {
    background-color: skyblue;
}
.nth-child-keyword p:nth-child(even) {
    background-color: gray;
}

HTML:

<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 表示從第二個元素開始)。

CSS:

.nth-child-expression p:nth-child(2n+3) {
    background-color: skyblue;
}

HTML:

<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 個元素。

CSS:

.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;
}

HTML:

<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 (偶數) 的元素。

CSS:

.nth-of-type-keyword p:nth-of-type(odd) {
    background-color: skyblue;
}
.nth-of-type-keyword p:nth-of-type(even) {
    background-color: gray;
}

HTML:

<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 表示從第二個元素開始)。

CSS:

.nth-of-type-expression p:nth-of-type(2n+3) {
    background-color: skyblue;
}

HTML:

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

CSS:

.first-child p:first-child {
    background-color: skyblue;
}

HTML:

<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 元素)。

CSS:

.first-of-type p:first-of-type {
    background-color: skyblue;
}

HTML:

<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 元素 (計算類型包含所有元素)。

CSS:

.only-child p:only-child {
    background-color: skyblue;
}

HTML:

<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 元素)。

CSS:

.only-of-type p:only-of-type {
    background-color: skyblue;
}

HTML:

<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、文字節點、空格。
  • <-- 註解 -->:不是子元素。

CSS:

.empty {
    height: 20px;
}
.empty:empty {
    background-color: skyblue;
}

HTML:

<div class="empty"></div>
<div class="empty">div</div>
<div class="empty"> </div>
<div class="empty"><!-- 註解 --></div>
div

語言偽類 E:lang

選取 p 元素有 lang 語言的屬性,並且啟始值等於 zh 或 zh-。

CSS:

.lang:lang(zh) {
    background-color: skyblue;
}

HTML:

<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 為啟用的元素。

CSS:

.enabled:enabled {
    background-color: skyblue;
}

HTML:

<input type="text" class="enabled" value="enabled">
<input type="text" class="enabled" value="disabled" disabled>

E:disabled

選取 UI 為禁用的元素。

CSS:

.disabled:disabled {
    background-color: skyblue;
}

HTML:

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

CSS:

input.checked:checked {
    height: 30px;
    width: 30px;
}
select.checked option:checked {
    background-color: skyblue;
}

HTML:

<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 的所有元素。

CSS:

.not *:not(p) {
    background-color: skyblue;
}

HTML:

<div class="not">
    <strong>strong</strong>
    <p>p</p>
    <span>span<span>
</div>
strong

p

span

參考

發表留言