CSS 虛擬 (偽) 類別列表

連結與使用者操作偽類

「連結偽類」與「使用者操作偽類」一起使用時，請注意順序。例如指定 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>

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

目標偽類 :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>

使用「關鍵字」方式：找到 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>

使用「公式」方式：找到 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>

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>

使用「關鍵字」方式：找到 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>

使用「公式」方式：找到 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>

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>

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>

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>

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>

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>

語言偽類 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>

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>

參考

• Selectors Level 3
• CSS 参考 - CSS（层叠样式表） | MDN