CSS 偽類選取器：連結、狀態與位置的選取方式
也稱做 擬態選取器、虛擬選取器，除了篩選元素之外，又多了用狀態來選擇元素，讓網頁的互動更加豐富。
連結型
選取 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()
選取被排除的元素。
以下案例便是利用 表單型 選取器來改變禁用表單元素的樣式。
書寫順序：LVHA
連結相關的四個偽類權重相同，後寫的會覆蓋先寫的，因此順序不能亂：
a:link { color: #2965f1; }
a:visited { color: #7c3aed; }
a:hover { color: #1d4ed8; }
a:active { color: #dc2626; }記法就是 LoVe HAte：link、visited、hover、active。
表單相關的偽類
input:disabled { background: #f3f4f6; }
input:checked + label { font-weight: 700; }
input:required { border-left: 3px solid #dc2626; }
input:invalid { border-color: #dc2626; }
input:placeholder-shown { font-style: italic; }搭配 輸入欄位 與 同層選取器，不寫 JavaScript 也能做出即時的視覺回饋。
無障礙提醒
小提醒
:hover在觸控裝置上幾乎無效，重要資訊別只靠它呈現。- 不要把
:focus的外框直接拿掉，那會讓鍵盤使用者不知道自己在哪裡。只想在滑鼠點擊時隱藏外框的話，改用:focus-visible。
常見問題
偽類為什麼要按 LVHA 的順序寫？
因為這四個偽類 權重 相同，後寫的會覆蓋先寫的。依照 :link、:visited、:hover、:active 的順序，滑入與按下的效果才不會被前面的規則蓋掉。
nth-child 和 nth-of-type 差在哪？
:nth-child 數的是所有同層元素，中間夾了別種標籤也會被算進去；:nth-of-type 只數同一種標籤。想挑第幾個 段落 時，用 :nth-of-type 比較準。
hover 在手機上有效嗎？
觸控裝置沒有滑鼠停留的概念，效果通常只在點擊當下短暫出現。重要的資訊不要只靠 :hover 呈現，行動裝置的使用者會看不到。
focus 和 focus-visible 該用哪一個？
想保留鍵盤操作的可見焦點但不希望滑鼠點擊時出現外框，就用 :focus-visible。無論如何都別直接把外框設成 none，那會讓鍵盤使用者不知道自己在哪裡。
