偽類 (pseudo-classes) 和偽元素 (pseudo-elements) 是什麼？

偽類（Pseudo-classes）

偽類用於選取元素在特定狀態下的樣式，語法使用單冒號 :。

/* 滑鼠懸停 */
a:hover { color: blue; }

/* 焦點 */
input:focus { border-color: orange; }

/* 第一個子元素 */
li:first-child { font-weight: bold; }

/* 第 n 個子元素 */
tr:nth-child(even) { background: #f5f5f5; }

/* 表單驗證狀態 */
input:valid { border-color: green; }
input:invalid { border-color: red; }

常見偽類

偽類	說明
:hover	滑鼠懸停時
:focus	元素取得焦點時
:active	元素被點擊時
:visited	已瀏覽過的連結
:first-child	父元素的第一個子元素
:last-child	父元素的最後一個子元素
:nth-child(n)	第 n 個子元素
:not(selector)	不符合選擇器的元素

偽元素（Pseudo-elements）

偽元素用於選取或插入元素的特定部分，語法使用雙冒號 ::（CSS3 規範，舊版也接受單冒號）。

/* 在元素前插入內容 */
.icon::before {
  content: '★';
  margin-right: 4px;
}

/* 在元素後插入內容 */
.required::after {
  content: ' *';
  color: red;
}

/* 選取文字被選中的部分 */
p::selection {
  background: yellow;
  color: black;
}

/* 首字母 */
p::first-letter {
  font-size: 2em;
}

關鍵差異

	偽類	偽元素
語法	: 單冒號	:: 雙冒號
作用	選取元素的狀態	選取或建立元素的特定部分
是否增加 DOM	❌	✅（::before / ::after）