本篇同步發表於我的 Hashnode 部落格：
Eva Chen | 網頁設計師下班後 (hashnode.dev)

CSS 偽類提供了一種方法，讓我們可以根據元素的不同狀態來變更其樣式。例如，當使用者將滑鼠移到元素上或點擊元素時，偽類會根據這些狀態套用特定的樣式（突然覺得這應該在剛開始先交給大家 XD）。

註：最近重感冒好了一些，加上放了颱風假，明天開始會漸漸地把之前和這一篇缺的的 DEMO 補上。

以下是幾個常用的偽類介紹及應用：

1. :hover （滑鼠懸停）

當使用者將滑鼠懸停在元素上時， :hover 偽類會被觸發。它常用於改變連結或按鈕的樣式。

button:hover {
  background-color: #f39c12;
  color: white;
當使用者將滑鼠移到按鈕上時，背景會變成橙色，文字變成白色。
2. :focus（焦點）
:focus 偽類會在表單元素（如輸入框）或其他可聚焦的元素獲得焦點時觸發。這通常發生在使用者點擊或按 Tab 鍵導航時。
input:focus {
  border: 2px solid #3498db;
當輸入框獲得焦點時，邊框會變成藍色。
3. :active（活動狀態）
:active 偽類會在使用者按下按鈕或連結時立即觸發，並在按住時保持生效。這通常用來提供點擊時的視覺回饋。
a:active {
  color: red;
當使用者點擊連結時，連結的顏色會變為紅色。
4. :focus-within（內部焦點）
:focus-within 偽類會在某個元素本身或其子元素獲得焦點時觸發。它非常適合處理表單組合元素，當其中任何一個子元素被聚焦時，改變父元素的樣式。
.form-group:focus-within {
  background-color: #ecf0f1;
當表單組內的任一輸入框獲得焦點時，整個表單組的背景顏色會變淡。
5. :focus-visible（可見焦點）
:focus-visible 主要針對鍵盤使用者或需要特定可見焦點指示的情況。這個偽類只會在可見焦點明顯需要時觸發，比如使用 Tab 鍵導航時。
button:focus-visible {
  outline: 3px dashed #2ecc71;
當使用鍵盤導航到按鈕時，按鈕會顯示綠色虛線外框，方便視覺提示。
6. :target（目標元素）
:target 偽類會針對 URL 中指定的片段識別符號（如錨點）進行樣式變更。例如，當你點擊一個連結並跳轉到該頁面的特定部分時，該部分可以顯示不同的樣式。
section:target {
  background-color: #f1c40f;
  border: 2px solid #e67e22;
當使用者點擊跳轉連結到某個 section 時，該區域的背景會變黃，並有橙色邊框。
                            #63 CSS 自訂捲軸顏色與樣式：scrollbar-color、scrollbar-width、scrollbar-gutter、::-webkit-scrollbar-*
                            #64 CSS 捲動提示陰影：使用 CSS 漸層 radial-gradient 與 isolation 製作