CSS 偽類（Pseudo-classes）的詳細介紹

CSS 偽類詳解與示例

在日常的前端開發中，CSS 偽類可以幫助我們非常精準地選擇元素或其特定狀態，從而達到豐富頁面表現的目的。本文將詳細介紹以下偽類的使用：

表單相關偽類
:checked、:disabled、:enabled、:in-range、:invalid、:optional、:out-of-range、:read-only、:read-write、:required、:valid
結構相關偽類
:empty、:first-of-type、:last-child、:last-of-type、:nth-child(n)、:nth-last-child(n)、:nth-of-type(n)、:nth-last-of-type(n)、:only-of-type、:only-child、:not(selector)
鏈接與用戶交互狀態偽類
:link、:visited、:active、:hover、:focus、:target
其他常用偽類
:root、:lang(language)
偽元素
::first-letter、::first-line、::before、::after

下面我們通過具體實例來逐一說明它們的用法。

1. 表單相關偽類

1.1 `:checked`

用于選中已被選中的表單元素。比如下面的復選框和單選按鈕，在選中后，文本顏色變為綠色。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>:checked 示例</title><style>input:checked + label {font-weight: bold;color: green;}</style>
</head>
<body><h3>:checked 示例</h3><input type="checkbox" id="cb1"><label for="cb1">復選框 1</label><br><input type="radio" name="group" id="r1"><label for="r1">單選按鈕 1</label><input type="radio" name="group" id="r2"><label for="r2">單選按鈕 2</label>
</body>
</html>

在這里插入圖片描述

1.2 `:disabled` 與 `:enabled`

選擇被禁用或啟用的表單元素。可以通過不同的樣式提示用戶哪些輸入項不能使用或可以交互。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>:disabled 和 :enabled 示例</title><style>input:disabled {background-color: #f5f5f5;cursor: not-allowed;}input:enabled {border: 1px solid #66afe9;}</style>
</head>
<body><h3>表單狀態示例</h3><input type="text" placeholder="啟用的文本框"><br><br><input type="text" placeholder="禁用的文本框" disabled>
</body>
</html>

在這里插入圖片描述

1.3 `:in-range` 與 `:out-of-range`

用于為指定范圍內或超出范圍的輸入框設置樣式。適用于例如數字輸入、日期輸入等場景。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>:in-range 與 :out-of-range 示例</title><style>input:in-range {border-color: green;}input:out-of-range {border-color: red;}</style>
</head>
<body><h3>取值范圍驗證</h3><!-- 設置 min 和 max 屬性 --><input type="number" min="1" max="10" value="5"><br><br><input type="number" min="1" max="10" value="20">
</body>
</html>

在這里插入圖片描述

1.4 `:invalid` 與 `:valid`

結合 HTML5 表單驗證，可以區分用戶輸入的合法性，為合法或非法的狀態加以不同樣式提示。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>:valid 與 :invalid 示例</title><style>input:valid {border-color: green;}input:invalid {border-color: red;}</style>
</head>
<body><h3>表單驗證</h3><!-- 使用 required 限制必填，pattern 限制格式 --><input type="email" placeholder="請輸入有效的郵箱" required>
</body>
</html>

在這里插入圖片描述

1.5 `:optional`, `:read-only`, `:read-write`, `:required`

這些偽類針對不同屬性的輸入框進行樣式區分，比如區分必填與選填、只讀與可編輯：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>:optional 與 :required 示例</title><style>input:optional {background-color: #e6f7ff;}input:required {background-color: #fff1f0;}</style>
</head>
<body><h3>必填與選填示例</h3><input type="text" placeholder="選填項"><br><br><input type="text" placeholder="必填項" required>
</body>
</html>

在這里插入圖片描述

2. 結構相關偽類

2.1 `:empty`

選擇沒有任何子元素（包括文本節點）的元素。比如下面的  標簽，如果沒有內部內容，會被設置背景色。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>:empty 示例</title><style>p:empty {background-color: #f9f9f9;border: 1px dashed #ccc;min-height: 50px;}</style>
</head>
<body><h3>:empty 示例</h3><p>這一段有內容，不會被選中</p><p></p>
</body>
</html>

在這里插入圖片描述

2.2 `:first-of-type` 與 `:last-of-type`

用于選擇同一父元素中的第一個或最后一個特定類型的子元素。假設一個容器中有多個  標簽，下面示例分別標記第一個和最后一個 ：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>:first-of-type 與 :last-of-type 示例</title><style>p:first-of-type {color: blue;}p:last-of-type {color: red;}</style>
</head>
<body><h3>結構中的第一個與最后一個<p></h3><div><p>第一段，應該顯示為藍色</p><p>中間段</p><p>最后一段，應該顯示為紅色</p></div>
</body>
</html>

在這里插入圖片描述

2.3 `:first-child` 與 `:only-child`

:first-child 選擇作為父元素第一個子元素的指定元素
:only-child 選擇僅存在唯一子元素時的指定元素

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>:first-child 與 :only-child 示例</title><style>p:first-child {font-weight: bold;}p:only-child {font-style: italic;color: purple;}</style>
</head>
<body><h3>只有一個子元素的示例</h3><div><p>我是唯一的子元素，應該應用 :only-child 樣式</p></div><div><p>我是第一個子元素，應該應用 :first-child 樣式</p><p>我是第二個子元素，不應用 :first-child 樣式</p></div>
</body>
</html>

在這里插入圖片描述

2.4 `:nth-child(n)`, `:nth-last-child(n)`, `:nth-of-type(n)`, `:nth-last-of-type(n)`

這四個偽類可以用來根據子元素的索引位置來選取元素。

p:nth-child(2)：選擇父元素的第二個子元素，并且它是  標簽
p:nth-last-child(2)：選擇倒數第二個子元素，如果它是 
p:nth-of-type(2)：在同一類型中選擇第二個 
p:nth-last-of-type(2)：在同一類型中選擇倒數第二個

下面通過一個示例來說明：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>:nth-child 與 :nth-of-type 示例</title><style>/* 父元素中第二個子元素（無論類型） */div > *:nth-child(2) {background-color: #dff0d8;}/* 父元素中第二個<p>標簽 */p:nth-of-type(2) {border: 1px solid #f0ad4e;}</style>
</head>
<body><h3>:nth-child 與 :nth-of-type 示例</h3><div><span>第一個子元素</span><p>這是第二個子元素，也同時是第一個<p>？</p><p>這是第二個<p>類型的子元素，將被邊框標記</p></div>
</body>
</html>

在這里插入圖片描述

2.5 `:not(selector)`

用于排除某些元素。例如下面的示例中，除  外的其他所有元素都會被應用灰色背景：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>:not 示例</title><style>*:not(p) {background-color: #eee;}</style>
</head>
<body><h3>:not 示例</h3><p>我不會有灰色背景</p><div>我會有灰色背景</div><span>我也會有灰色背景</span>
</body>
</html>

3. 鏈接與用戶交互狀態偽類

3.1 鏈接的偽類：`:link`、`:visited`、`:active`、`:hover`

這些偽類用于定義鏈接在不同狀態下的樣式，例如未訪問、已訪問、鼠標懸停以及活動時的表現。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>鏈接偽類示例</title><style>a:link {color: blue;}a:visited {color: purple;}a:hover {text-decoration: underline;}a:active {color: red;}</style>
</head>
<body><h3>鏈接狀態示例</h3><p>這是一個 <a href="https://www.example.com" target="_blank">示例鏈接</a>。嘗試點擊或將鼠標懸停在鏈接上看看效果。</p>
</body>
</html>

3.2 `:focus`

用于選中當前獲得焦點的元素，常見于表單輸入，幫助用戶清楚知道當前輸入位置。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>:focus 示例</title><style>input:focus {border-color: #66afe9;box-shadow: 0 0 8px rgba(102,175,233,0.6);}</style>
</head>
<body><h3>:focus 示例</h3><input type="text" placeholder="點擊后試試">
</body>
</html>

在這里插入圖片描述

3.3 `:target`

用于選中當前 URL 錨點對應的元素。假設頁面中有一個元素的 id 為 news，當 URL 包含 #news 時，該元素會被選中。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>:target 示例</title><style>#news:target {background-color: #ffe58f;padding: 10px;}</style>
</head>
<body><h3>:target 示例</h3><p>點擊下面的鏈接跳轉到新聞區域：</p><a href="#news">跳轉到新聞</a><div style="margin-top: 50px;"><p id="news">這是新聞內容區域，當 URL 中包含 #news 時，我會被高亮顯示。</p></div>
</body>
</html>

在這里插入圖片描述

4. 其他偽類與偽元素

4.1 `:root`

:root 選擇器選中文檔的根元素（通常是 <html>），經常用來定義全局 CSS 變量或全局樣式。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>:root 示例</title><style>:root {--main-bg-color: #f0f8ff;}body {background-color: var(--main-bg-color);}</style>
</head>
<body><h3>:root 示例</h3><p>背景顏色由 CSS 變量控制。</p>
</body>
</html>

在這里插入圖片描述

4.2 `:lang(language)`

根據元素的語言屬性設定樣式。比如下面示例中，所有 lang="it"（意大利語）的  元素會使用特殊樣式。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>:lang 示例</title><style>p:lang(it) {color: green;font-weight: bold;}</style>
</head>
<body><h3>:lang 示例</h3><p lang="it">Questo è un testo in italiano.</p><p lang="en">This is an English text.</p>
</body>
</html>

在這里插入圖片描述

4.3 偽元素 `::first-letter`、`::first-line`、`::before`、`::after`

偽元素可以在元素內容前后或內部特定位置插入樣式，比如首字母、首行等，為排版加分。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>偽元素 示例</title><style>p::first-letter {font-size: 200%;color: #d9534f;}p::first-line {font-weight: bold;}p::before {content: "【開始】";color: #5bc0de;}p::after {content: "【結束】";color: #5cb85c;}</style>
</head>
<body><h3>偽元素應用</h3><p>這是一段用于展示偽元素效果的文本。</p>
</body>
</html>

在這里插入圖片描述