偽類在前端開發中用於選擇元素的特定狀態，而不是基於元素的屬性、類或 ID。它們允許你根據使用者的互動或文件樹中的位置來設定樣式。
偽類可以大致分為以下幾大類：
-
動態偽類: 這些偽類基於使用者的互動而改變元素的樣式。 它們代表了元素的一種瞬時狀態。 常見的動態偽類包括：
:link: 未訪問的連結。:visited: 已訪問的連結。:hover: 滑鼠懸停在元素上。:active: 元素被啟用，例如滑鼠點選或鍵盤按下。:focus: 元素獲得焦點，例如表單輸入框被選中。
-
UI元素狀態偽類: 這些偽類針對表單元素或其他UI元素的特定狀態。
:enabled: 啟用的表單元素。:disabled: 禁用的表單元素。:checked: 選中的單選框或核取方塊。:indeterminate: 處於不確定狀態的核取方塊 (例如，父核取方塊的子核取方塊部分選中)。:default: 預設選中的表單元素 (例如，按鈕)。:valid: 表單元素的值有效。:invalid: 表單元素的值無效。:in-range: 表單元素的值在指定範圍內。:out-of-range: 表單元素的值超出指定範圍。:required: 必填的表單元素。:optional: 可選的表單元素。:read-only: 只讀的表單元素。:read-write: 可讀寫的表單元素。:placeholder-shown: 表單元素顯示佔位符文字。
-
結構性偽類: 這些偽類根據元素在文件樹中的位置來選擇元素。
:root: 文件的根元素，通常是<html>元素。:first-child: 父元素的第一個子元素。:last-child: 父元素的最後一個子元素。:first-of-type: 父元素的第一個指定型別的子元素。:last-of-type: 父元素的最後一個指定型別的子元素。:nth-child(n): 父元素的第 n 個子元素。:nth-last-child(n): 父元素的倒數第 n 個子元素。:nth-of-type(n): 父元素的第 n 個指定型別的子元素。:nth-last-of-type(n): 父元素的倒數第 n 個指定型別的子元素。:only-child: 父元素的唯一子元素。:only-of-type: 父元素的唯一指定型別的子元素。:empty: 沒有子元素的元素（包括文字節點）。
-
其他偽類: 一些不完全屬於以上類別的偽類。
:not(selector): 不匹配指定選擇器的元素。:target: URL 片段識別符號指向的元素。:is(selectors): 匹配括號中任意一個選擇器的元素，類似於or操作.:where(selectors): 類似於:is(), 但優先順序更低.:has(selectors): 如果元素包含至少一個與指定選擇器匹配的元素，則匹配該元素。 (相對較新)
需要注意的是，不同的偽類可以組合使用以實現更精細的樣式控制。 例如，a:hover:visited 選擇滑鼠懸停在已訪問連結上的樣式。 理解和運用偽類是編寫高效 CSS 的關鍵技能。