偽類（Pseudo-classes）
定義：偽類用於選擇元素的「特定狀態」或「特定位置」，而不是元素本身。
| 類型 |
語法 |
範例 |
說明 |
| 滑鼠懸停 |
:hover |
a:hover { color: red; } |
當用戶將滑鼠懸停在元素上時。 |
| 焦點狀態 |
:focus |
input:focus { border-color: blue; } |
當元素獲得焦點時（例如輸入框被點擊）。 |
| 第 n 個子元素 |
:nth-child(n) |
li:nth-child(2) { color: green; } |
選擇父元素下的第 n 個子元素。 |
| 第一個子元素 |
:first-child |
p:first-child { font-weight: bold; } |
選擇父元素下的第一個子元素。 |
| 不符合指定選擇器 |
:not(selector) |
div:not(.special) { opacity: 0.5; } |
選擇不符合指定選擇器的元素。 |
偽元素（Pseudo-elements）
定義：偽元素用於選擇元素的「特定部分」，而不是整個元素。
| 類型 |
語法 |
範例 |
說明 |
| 在內容前插入 |
::before |
p::before { content: "👉"; } |
在元素內容之前插入內容。 |
| 在內容後插入 |
::after |
p::after { content: "👈"; } |
在元素內容之後插入內容。 |
| 第一行文本 |
::first-line |
p::first-line { font-weight: bold; } |
選擇元素的第一行文本。 |
| 第一個字母 |
::first-letter |
p::first-letter { font-size: 2em; } |
選擇元素的第一個字母。 |
| 選中文本 |
::selection |
::selection { background: yellow; } |
選擇用戶選中的文本部分。 |
總結
偽類：選擇元素的「狀態」或「位置」，語法為 :。
偽元素：選擇元素的「特定部分」或插入內容，語法為 ::。