CSS 偽類參考手冊

CSS 偽類

偽類用于定義元素的特殊狀態。

例如，它可以用于：

  • 當用戶將鼠標懸停在元素上時設置樣式
  • 為已訪問和未訪問的鏈接設置不同的樣式
  • 當元素獲得焦點時設置樣式
  • 為有效/無效/必填/選填的表單元素設置樣式

下表展示了 CSS 中不同的偽類：

偽類 例子 例子描述
:active a:active 選擇活動鏈接
:any-link a:anylink 選擇所有帶有 href 屬性的 <a> 或 <area> 元素。
:auto-fill input:autofill 選擇所有由瀏覽器自動填充值的 <input> 元素。
:checked option:checked 匹配所有被選中的 <input> 或 <option> 元素。
:default input:default 選擇一組相關元素中的默認表單元素。
:defined :defined 選擇所有已定義的元素（標準或自定義元素）。
:dir() :dir(rtl) 選擇具有指定文本方向的元素。
:disabled option:disabled 選擇所有被禁用的元素，常用于表單元素。
:empty div:empty 選擇所有沒有子元素（包括文本節點）的元素。
:enabled input:enabled 選擇所有啟用的元素，常用于表單元素。
:first @page :first 表示打印文檔的第一頁（與 @page 規則一起使用）。
:first-child p:first-child 選擇作為其父元素第一個子元素的元素（在一組兄弟元素中）。
:first-of-type li:first-of-type 選擇一組兄弟元素中第一個特定類型的元素。
:focus select:focus 選擇獲得焦點的元素，常用于表單元素。
:focus-visible button:focus-visible 選擇獲得焦點的元素（僅在通過鍵盤而非鼠標聚焦時應用焦點樣式）。
:focus-within form:focus-within 匹配元素或其任何后代獲得焦點的元素。
:fullscreen :fullscreen 選擇當前處于全屏模式的元素。
:has() h2:has(+p) 選擇緊接在 <p> 元素后的 <h2> 元素，并將樣式應用于 <h2>。
:hover a:hover 選擇鼠標懸停的元素。
:in-range input:in-range 選擇值在指定范圍內的 <input> 元素。
:indeterminate input:indeterminate 選擇處于不確定狀態的表單元素。
:invalid input:invalid 選擇無效的表單元素。
:is() :is(ul, ol) 選擇所有 <ul> 和 <ol> 元素。
:lang() p:lang(it) 選擇 lang 屬性為 "it"（意大利語）的 <p> 元素。
:last-child li:last-child 選擇作為其父元素最后一個子元素的 <li> 元素。
:last-of-type p:last-of-type 選擇作為其父元素最后一個 <p> 元素的 <p> 元素。
:left @page :left 表示打印文檔的所有左側頁面（與 @page 規則一起使用）。
:link a:link 選擇所有未訪問的鏈接。
:modal :modal 選擇處于模態狀態的元素。
:not() :not(p) 選擇所有不是 <p> 元素的元素。
:nth-child() p:nth-child(2) 選擇作為其父元素第二個子元素的 <p> 元素。
:nth-last-child() p:nth-last-child(2) 選擇作為其父元素倒數第二個子元素的 <p> 元素。
:nth-last-of-type() p:nth-last-of-type(2) 選擇作為其父元素倒數第二個 <p> 元素的 <p> 元素。
:nth-of-type() p:nth-of-type(2) 選擇作為其父元素第二個 <p> 元素的 <p> 元素。
:only-child p:only-child 選擇作為其父元素唯一子元素的 <p> 元素。
:only-of-type p:only-of-type 選擇作為其父元素唯一 <p> 元素的 <p> 元素。
:optional textarea:optional 選擇沒有 required 屬性的 <input>、<select> 或 <textarea> 元素。
:out-of-range input:out-of-range 選擇值超出指定范圍的 <input> 元素。
:placeholder-shown input:placeholder-shown 選擇當前顯示占位符文本的 <input> 或 <textarea> 元素。
:popover-open :popover-open 選擇處于顯示彈出狀態的元素。
:read-only input:read-only 選擇帶有 readonly 屬性的輸入元素。
:read-write input:read-write 選擇可編輯的輸入元素。
:required input:required 選擇帶有 required 屬性的輸入元素。
:right @page :right 表示打印文檔的所有右側頁面（與 @page 規則一起使用）。
:root :root 選擇文檔的根元素。
:scope :scope 選擇作為選擇器匹配參考點或范圍的元素。
:state() :state() 選擇具有指定自定義狀態的自定義元素。
:target :target 選擇當前活動的目標元素。
:user-invalid :user-invalid 選擇具有無效值的表單元素（在用戶與其交互后）。
:user-valid :user-valid 選擇具有有效值的表單元素（在用戶與其交互后）。
:valid input:valid 選擇所有具有有效值的輸入元素。
:visited a:visited 選擇所有已訪問的鏈接。
:where() :where(ol, ul) 選擇所有 <ul> 和 <ol> 元素。