總結

1. 選擇對象不同

內容	說明
偽類作用對象	元素的狀態或位置
偽元素作用對象	元素的一部分內容或虛擬內容
是否新增節點	均不新增節點
常用符號	:（偽類）、::（偽元素）
推薦場景	偽類用于交互與狀態控制；偽元素用于樣式修飾與內容插入

---

31. 偽類和偽元素的區別

一、基本定義

類型	定義
偽類（Pseudo-class）	用于表示元素的某種狀態或位置，如鏈接的點擊狀態、鼠標懸停、第一個子元素等。
偽元素（Pseudo-element）	用于選擇元素的某一部分內容或虛擬部分，如首字母、首行、插入內容等。

---

二、核心區別對比表

對比維度	偽類（Pseudo-class）	偽元素（Pseudo-element）
表示符號	單冒號 :	雙冒號 ::（部分舊寫法也用單冒號）
作用對象	元素本身的狀態或位置	元素的某一部分或虛擬內容
是否新增 DOM 節點	? 不新增節點	? 不新增節點（但創建虛擬內容）
是否可交互	? 可以觸發交互（如 :hover、:active）	? 不可交互（僅樣式控制）
是否可被腳本訪問	? 可以通過 JS 控制	? 無法通過 JS 控制（非真實 DOM）
常見示例	:hover、:nth-child()、:focus	::before、::after、::first-line

---

三、常見偽類示例

偽類	描述
:hover	鼠標懸停時的狀態
:active	元素被激活時（如點擊）
:focus	元素獲得焦點時
:visited	已訪問的鏈接
:first-child	第一個子元素
:last-child	最后一個子元素
:nth-child(n)	第 n 個子元素
:not(selector)	排除某個選擇器匹配的元素

示例：

a:hover {color: red;
}li:nth-child(odd) {background-color: #f0f0f0;
}

---

四、常見偽元素示例

偽元素	描述
::before	在元素內容前插入內容
::after	在元素內容后插入內容
::first-line	選擇元素的第一行文本
::first-letter	選擇元素的第一個字符
::selection	選擇用戶選中的文本部分
::placeholder	輸入框的占位符文本

示例：

p::first-letter {font-size: 2em;float: left;
}.button::after {content: " ?";color: blue;
}

---

五、使用場景對比

場景	推薦方式	說明
鼠標懸停效果	:hover	實現按鈕、鏈接的交互效果
列表奇偶行樣式	:nth-child()	表格、列表的視覺優化
插入裝飾內容	::before / ::after	圖標、提示、裝飾性內容
首字下沉效果	::first-letter	文章、雜志類頁面美化
自定義選中樣式	::selection	提升用戶選中文本的視覺體驗
表單占位符美化	::placeholder	統一輸入框風格

---

六、注意事項

注意點	說明
::before 和 ::after 必須配合 content使用	否則不會顯示
偽類可以組合使用	如 a:hover::after 是合法的
偽元素不能綁定事件	因為不是真實 DOM
雙冒號是標準寫法	用于區分偽類和偽元素（但瀏覽器兼容舊寫法）

---