CSS Selector - 偽類選取器
也稱做 擬態選取器、虛擬選取器,除了篩選元素之外,又多了用狀態來選擇元素,讓網頁的互動更加豐富。
連結型
選取 HTML 文件上具有連結的元素,也就是說僅有連結才能使用。
:link
尚未被點選的連結樣式,亦是一般載入時的連結。
:visited
已經被點閱過的連結。
以下案例便是利用 連結型 將使用者對操作目標的行為狀態進行樣式的改變。
小提醒
- 以超連結來說,目前 Away 參訪各網站來看,頂多只有 一般、滑入兩種狀態。因此,不需要製作這麼多種狀態。
- 出於使用者的隱私原因,
a:visited狀態在background-position上,無法正常顯示。https://developer.mozilla.org/zh-CN/docs/Web/CSS/:visited#隐私限制
狀態型
選取 HTML 文件上特定狀態的元素,也就是與使用者行為相關的選取器。
:hover
游標滑入超連結文字時的呈現效果。
:active
於超連結文字上並按下不放時所呈現的效果。
:focus
焦點時的狀態,使用 Tab 鍵可以切換狀態。
以下案例便是利用 狀態型 將使用者對操作目標的行為狀態進行樣式的改變。
位置型
選取 HTML 文件上經篩選過的元素。
:first-child
同層的第一個元素。
:last-child
同層的最後一個元素。
:nth-child(參數)
同層篩選元素。
參數
n: 指定第 n 個。odd: 指定奇數。even: 指定偶數。
以下案例便是利用 位置型 將篩選出來的對象進行樣式的改變。
表單型
選取 HTML 文件上特定狀態的元素,也就是與使用者行為相關的選取器。
:disabled
選取被禁用的表單元素。
:checked
選取 checkbox、radio 被核取的表單元素。
以下案例便是利用 表單型 選取器來改變禁用表單元素的樣式。
邏輯型
選取 HTML 文件上經邏輯篩選過的元素。
:not()
選取被排除的元素。
以下案例便是利用 表單型 選取器來改變禁用表單元素的樣式。
