在 CSS 中，**伪类（Pseudo-classes） 和 伪元素（Pseudo-elements）** 都是用于选择元素的特殊方式，但它们的用途和语法有本质区别：
1. 伪类（Pseudo-classes）
- 作用：选择元素的 特定状态（如交互状态、结构位置等）。
- 语法：使用单冒号
:（例如 :hover）。
- 核心特点：
- 针对元素的**整体**（如整个按钮、整个链接）。
- 描述元素在**特定场景下的状态**（如鼠标悬停、被点击、是父元素的第一个子元素等）。
常见伪类示例：
| 伪类 |
说明 |
:hover |
鼠标悬停在元素上时生效 |
:active |
元素被激活（如点击）时生效 |
:focus |
元素获得焦点时生效（如表单输入） |
:nth-child(n) |
选择父元素的第 n个子元素 |
:first-child |
选择父元素的第一个子元素 |
:disabled |
选择被禁用的表单元素 |
代码示例：
/* 鼠标悬停时链接变红色 */
a:hover {
color: red;
}
/* 表格的偶数行背景色 */
tr:nth-child(even) {
background: #f2f2f2;
}
2. 伪元素（Pseudo-elements）
- 作用：选择元素的 特定部分（如首行、首字母，或在内容前后插入新内容）。
- 语法：使用双冒号
::（CSS3 规范，例如 ::before）。
⚠️ 注意：早期 CSS2 用单冒号（如 :before），现代写法推荐用 ::。
- 核心特点：
- 创建或选择元素的**虚拟子部分**（不是整个元素）。
- 常用于修饰内容片段（如首字母下沉）或插入额外内容（无需修改 HTML）。
常见伪元素示例：
| 伪元素 |
说明 |
::before |
在元素**内容前**插入新内容 |
::after |
在元素**内容后**插入新内容 |
::first-line |
选择文本的**首行** |
::first-letter |
选择文本的**首字母** |
::selection |
选择用户**选中的文本** |
代码示例：
/* 在段落前插入红色引号 */
p::before {
content: "“";
color: red;
}
/* 段落首字母放大 */
p::first-letter {
font-size: 2em;
}
/* 用户选中文本的样式 */
::selection {
background: yellow;
}
核心区别总结
| 特性 |
伪类（Pseudo-classes） |
伪元素（Pseudo-elements） |
| 目标 |
元素的**状态**（如悬停、焦点） |
元素的**特定部分**（如首行、前后内容） |
| 语法 |
单冒号 :（:hover） |
双冒号 ::（::before，CSS3 规范） |
| 是否改变 DOM |
不改变（仅匹配已有状态） |
可插入新内容（如 ::before） |
| 常见用例 |
交互反馈、结构选择器（:nth-child） |
内容修饰（首字母、首行）、插入装饰性内容 |
记忆技巧
- 伪类：描述元素 “在什么时候”（如
:hover 悬停时）。
- 伪元素：描述元素 “的某个部分是什么”（如
::first-letter 首字母）。