偽類
CSS 偽類 是新增到選擇器上的一個關鍵字，它允許您樣式化所選元素（或多個元素）的特定狀態。例如，偽類 :hover 可用於在使用者指標懸停在按鈕上時選擇該按鈕，然後可以對這個選中的按鈕進行樣式設定。
/* Any button over which the user's pointer is hovering */
button:hover {
color: blue;
}
偽類由一個冒號 (:) 後跟偽類名稱（例如 :hover）組成。功能性偽類還包含一對括號來定義引數（例如 :dir()）。偽類所附加的元素被定義為 錨定元素（例如 button:hover 中的 button）。
偽類不僅允許您根據文件樹的內容對元素應用樣式，還可以根據外部因素（例如導航器歷史記錄 (例如 :visited)）、其內容的狀態（例如某些表單元素上的 :checked）或滑鼠的位置（例如 :hover，它允許您知道滑鼠是否懸停在元素上）來應用樣式。
注意：與偽類不同，偽元素可用於樣式化元素的 特定部分。
元素偽類
這些偽類與元素的核心身份相關。
元素顯示狀態偽類
這些偽類根據元素的顯示狀態啟用元素的選定。
:open-
匹配一個可以開啟或關閉且當前開啟的元素。
:popover-open-
匹配當前處於顯示狀態的彈出元素。
:modal-
匹配處於一種狀態的元素，在該狀態下它排除與外部元素的所有互動，直到互動被解除。
:fullscreen-
匹配當前處於全屏模式的元素。
:picture-in-picture-
匹配當前處於畫中畫模式的元素。
輸入偽類
這些偽類與表單元素相關，並根據 HTML 屬性以及欄位在互動前後的狀態來選擇元素。
:enabled-
表示處於啟用狀態的使用者介面元素。
:disabled-
表示處於停用狀態的使用者介面元素。
:read-only-
表示使用者無法更改的任何元素。
:read-write-
表示任何使用者可編輯的元素。
:placeholder-shown-
匹配顯示佔位符文字的輸入元素。例如，它將匹配
<input>和<textarea>元素中的placeholder屬性。 :autofill-
匹配當瀏覽器自動填充
<input>時。 :default-
匹配一組元素中預設的一個或多個 UI 元素。
:checked-
匹配複選框和單選按鈕等元素在開啟時。
:indeterminate-
匹配處於不確定狀態的 UI 元素。
:blank-
匹配空的、包含空字串或其他空輸入的
使用者輸入元素。 :valid-
匹配內容有效的元素。例如，型別為“email”的輸入元素，其中包含格式正確的電子郵件地址，如果控制元件不是必需的，則為空值。
:invalid-
匹配內容無效的元素。例如，輸入了名稱的型別為“email”的輸入元素。
:in-range-
適用於具有範圍限制的元素。例如，當所選值在允許範圍內時，滑塊控制元件。
:out-of-range-
適用於具有範圍限制的元素。例如，當所選值超出允許範圍時，滑塊控制元件。
:required-
匹配當表單元素是必需的時。
:optional-
匹配當表單元素是可選的時。
:user-valid-
表示輸入正確但僅在使用者與它互動後才正確的元素。
:user-invalid-
表示輸入不正確但僅在使用者與它互動後才不正確的元素。
語言偽類
這些偽類反映了文件語言，並根據語言或指令碼方向啟用元素的選定。
位置偽類
這些偽類與連結以及當前文件中的目標元素相關。
:any-link-
如果元素匹配
:link或:visited，則匹配該元素。 :link-
匹配尚未訪問的連結。
:visited-
匹配已訪問的連結。
:local-link-
匹配絕對 URL 與目標 URL 相同的連結。例如，指向同一頁面的錨點連結。
:target-
匹配作為文件 URL 目標的元素。
:scope-
表示作為選擇器匹配參考點的元素。
注意：曾定義但已從規範中刪除的 :target-within 偽類，用於匹配是或包含文件 URL 目標的後代的元素。為此目的，請使用 :has(:target)。
資源狀態偽類
這些偽類適用於能夠處於播放狀態的媒體，例如影片。
:playing-
表示正在播放的可播放元素。
:paused-
表示已暫停的可播放元素。
:seeking-
表示當前正在媒體資源中尋找播放位置的可播放元素。
:buffering-
表示正在播放但因正在下載媒體資源而暫時停滯的可播放元素。
:stalled-
表示正在播放但因無法下載媒體資源而停滯的可播放元素。
:muted-
表示已靜音的發聲元素。
:volume-locked-
表示音量級別被瀏覽器鎖定的發聲元素。
時間維度偽類
這些偽類適用於檢視具有時間性的內容時，例如 WebVTT 字幕軌道。
樹結構偽類
這些偽類與元素在文件樹中的位置相關。
:root-
表示文件的根元素。在 HTML 中，這通常是
<html>元素。 :empty-
表示除了空白字元之外沒有子級的元素。
:nth-child()-
使用
An+B符號從兄弟元素列表中選擇元素。 :nth-last-child()-
使用
An+B符號從兄弟元素列表中選擇元素，從列表末尾倒數。 :first-child-
匹配是其兄弟中第一個的元素。
:last-child-
匹配是其兄弟中最後一個的元素。
:only-child-
匹配沒有兄弟的元素。例如，列表中沒有其他列表項的列表項。
:heading()-
使用
An+B符號選擇標題元素（<h1>-<h6>）。 :nth-of-type()-
使用
An+B符號從兄弟元素列表中選擇與兄弟元素列表中特定型別匹配的元素。 :nth-last-of-type()-
使用
An+B符號從兄弟元素列表中選擇與兄弟元素列表中特定型別匹配的元素，從列表末尾倒數。 :first-of-type-
匹配是其兄弟中第一個的元素，並且也匹配某個型別選擇器。
:last-of-type-
匹配是其兄弟中最後一個的元素，並且也匹配某個型別選擇器。
:only-of-type-
匹配沒有選定型別選擇器的兄弟的元素。
Shadow-DOM 結構偽類
這些偽類與 Shadow DOM 相關。
:host-
匹配 Shadow 樹的 Shadow Host。
:host()-
匹配與
:host匹配並匹配所提供列表中的任何選擇器的元素。 :host-context()-
在 Shadow Host 的上下文中選擇 Shadow 樹之外的元素。
:has-slotted-
匹配已分配內容的 slot 元素。
使用者操作偽類
這些偽類需要使用者進行一些互動才能應用，例如將滑鼠指標懸停在元素上。
:hover-
匹配當用戶使用指向裝置指定專案時，例如將滑鼠指標懸停在專案上。
:active-
匹配當專案被使用者啟用時。例如，當專案被點選時。
:focus-
匹配當元素獲得焦點時。
:focus-visible-
匹配當元素獲得焦點且使用者代理識別出該元素應可見地獲得焦點時。
:focus-within-
匹配適用於
:focus的元素，以及任何具有適用於:focus的後代的元素。 :target-current-
匹配當前滾動到的
scroll-marker-group的::scroll-marker偽元素，換句話說，是活動的滾動標記。
功能性偽類
這些偽類接受選擇器列表或寬容選擇器列表作為引數。
自定義狀態偽類
這些偽類適用於自定義元素。
:state()-
匹配具有指定自定義狀態的自定義元素。
頁面偽類
這些偽類與列印文件中的頁面相關，並與 @page at-rule 一起使用。
檢視轉換偽類
這些偽類與檢視轉換中涉及的元素相關。
:active-view-transition-
當檢視轉換正在進行中（活動）時匹配文件的根元素，並在轉換完成後停止匹配。
:active-view-transition-type()-
當指定的檢視轉換正在進行中（活動）時匹配文件的根元素，並在轉換完成後停止匹配。
語法
selector:pseudo-class {
property: value;
}
與常規類一樣，您可以在選擇器中連結任意數量的偽類。
字母順序索引
由一組 CSS 規範定義的偽類包括以下內容
A
B
:blank(輸入) 實驗性:blank(頁面):buffering
C
:checked:current實驗性
D
E
F
H
I
L
:lang():last-child:last-of-type:left:link:local-link實驗性
M
N
O
P
R
S
T
U
V
W
規範
| 規範 |
|---|
| HTML # 偽類 |
| 選擇器 Level 4 |
| CSS 作用域模組級別 1 |
| CSS 分頁媒體模組第 3 級 |