Skip to content

CSS Selector - 偽類選取器

也稱做 擬態選取器虛擬選取器,除了篩選元素之外,又多了用狀態來選擇元素,讓網頁的互動更加豐富。

連結型

選取 HTML 文件上具有連結的元素,也就是說僅有連結才能使用。

尚未被點選的連結樣式,亦是一般載入時的連結。

:visited

已經被點閱過的連結。

以下案例便是利用 連結型 將使用者對操作目標的行為狀態進行樣式的改變。

小提醒

狀態型

選取 HTML 文件上特定狀態的元素,也就是與使用者行為相關的選取器。

:hover

游標滑入超連結文字時的呈現效果。

:active

於超連結文字上並按下不放時所呈現的效果。

:focus

焦點時的狀態,使用 Tab 鍵可以切換狀態。

以下案例便是利用 狀態型 將使用者對操作目標的行為狀態進行樣式的改變。

位置型

選取 HTML 文件上經篩選過的元素。

:first-child

同層的第一個元素。

:last-child

同層的最後一個元素。

:nth-child(參數)

同層篩選元素。

參數

  • n: 指定第 n 個。
  • odd: 指定奇數。
  • even: 指定偶數。

以下案例便是利用 位置型 將篩選出來的對象進行樣式的改變。

表單型

選取 HTML 文件上特定狀態的元素,也就是與使用者行為相關的選取器。

:disabled

選取被禁用的表單元素。

:checked

選取 checkboxradio 被核取的表單元素。

以下案例便是利用 表單型 選取器來改變禁用表單元素的樣式。

邏輯型

選取 HTML 文件上經邏輯篩選過的元素。

:not()

選取被排除的元素。

以下案例便是利用 表單型 選取器來改變禁用表單元素的樣式。