#52 詳細了解 CSS 各種偽類：hover、focus、active、focus-within、focus-visible、target

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 時，該區域的背景會變黃，並有橙色邊框。