在 CSS 的世界中，伪类（pseudo-classes） 和 伪元素（pseudo-elements） 是两个非常常用但又容易混淆的概念。它们都用于为 HTML 元素添加特殊样式效果，但其背后的工作机制和使用方式却有显著差异。
本文将带你系统梳理 伪类与伪元素的区别、作用以及实际应用场景，帮助你写出更清晰、高效的 CSS 样式代码。
📌 一、基本概念对比表
| 对比维度 | 伪类（Pseudo-class） | 伪元素（Pseudo-element） |
|---|---|---|
| 是否创建新元素 | ❌ 不创建新元素 | ✅ 创建虚拟元素 |
| 是否影响文档结构 | ❌ 不改变 DOM 结构 | ❌ 不改变 DOM 结构 |
| 表示符号 | 单冒号 : | 双冒号 :: |
| 主要用途 | 描述元素的某种状态或位置 | 操作元素的某些特定部分 |
| 示例 | a:hover, p:first-child | p::before, p::first-line |
🧩 二、逐项解析
1. 伪类（Pseudo-class）
✅ 定义：
伪类用于向某些选择器添加特殊的状态样式，表示某个元素处于某种状态。
🎯 特点：
- 不会创建新的元素；
- 描述的是已有元素的“状态”或“位置”；
- 常用于交互效果、结构匹配等；
📌 常见伪类示例：
/* 鼠标悬停时的颜色变化 */
a:hover {
color: #FF00FF;
}
/* 第一个子元素 */
p:first-child {
color: red;
}
/* 超链接的已访问状态 */
a:visited {
color: purple;
}
/* 表单输入获得焦点 */
input:focus {
border-color: blue;
}
⚙️ 常用伪类列表：
| 伪类名 | 说明 |
|---|---|
:hover | 鼠标悬停时的样式 |
:active | 元素被激活（如点击）时的样式 |
:focus | 表单控件获得焦点时的样式 |
:visited | 已访问过的超链接样式 |
:nth-child() | 匹配指定位置的子元素 |
:first-child | 匹配第一个子元素 |
:last-child | 匹配最后一个子元素 |
:not() | 排除符合选择器的元素 |
2. 伪元素（Pseudo-element）
✅ 定义：
伪元素是通过 CSS 在现有元素的某些特定部分插入虚拟的内容或样式，虽然它们看起来像新元素，但实际上并不存在于 DOM 中。
🎯 特点：
- 创建的是虚拟的“元素”；
- 通常用于操作元素的某一部分内容；
- 使用双冒号
::表示（为了与伪类区分）；
📌 常见伪元素示例：
/* 在每个段落前插入内容 */
p::before {
content: "第一章：";
}
/* 在每个段落后插入内容 */
p::after {
content: " 🔥 Hot!";
}
/* 设置段落首行样式 */
p::first-line {
background: red;
}
/* 设置段落首字母样式 */
p::first-letter {
font-size: 30px;
}
⚙️ 常用伪元素列表：
| 伪元素名 | 说明 |
|---|---|
::before | 在元素内容前插入虚拟内容 |
::after | 在元素内容后插入虚拟内容 |
::first-line | 选中元素的第一行文本 |
::first-letter | 选中元素的第一个字符 |
::selection | 用户选中文本时的样式 |
::placeholder | 输入框 placeholder 文字样式 |
::marker | 修改列表项标记（如 <li> 前的圆点） |
::backdrop | 全屏模式下的背景层（如 <dialog> 元素） |
💡 三、关键区别总结
| 区别维度 | 伪类 | 伪元素 |
|---|---|---|
| 是否创建新元素 | ❌ 否 | ✅ 是（虚拟元素） |
| 是否改变 DOM | ❌ 否 | ❌ 否 |
| 是否支持动态交互 | ✅ 支持用户行为触发（如 hover） | ❌ 多为静态样式控制 |
| 表示方式 | 单冒号 : | 双冒号 :: |
| 应用场景 | 状态匹配、结构定位 | 内容修饰、视觉增强 |
🧠 四、如何选择？什么时候用伪类？什么时候用伪元素？
| 场景描述 | 推荐使用 |
|---|---|
| 需要根据用户行为设置不同样式（如 hover） | ✅ 伪类 |
| 需要为元素的特定部分添加样式（如首行） | ✅ 伪元素 |
| 需要在元素前后插入内容（如图标、标签） | ✅ 伪元素 |
| 需要匹配子元素的位置关系（如第几个） | ✅ 伪类 |
| 实现按钮悬停动效 | ✅ 伪类 + transition |
| 自定义输入框 placeholder 样式 | ✅ 伪元素 |
📌 五、实战技巧分享
✅ 技巧一：利用 ::before 和 ::after 实现装饰性图标
.btn::after {
content: " ➤";
margin-left: 5px;
}
这样可以在按钮文字后自动加上箭头符号，无需额外 HTML。
✅ 技巧二：结合伪类和伪元素实现复杂样式
a:hover::after {
content: " (当前页面)";
color: gray;
}
当鼠标悬停在链接上时，自动显示提示信息。
✅ 技巧三：使用 ::selection 自定义文本选中颜色
::selection {
background: yellow;
color: black;
}
提升用户体验，让网站风格更统一。
📈 六、兼容性说明
- 伪类：大多数现代浏览器都支持常见的伪类；
- 伪元素：建议使用双冒号
::以确保未来兼容性； - 旧版浏览器（如 IE8 及以下）不支持伪类和伪元素；
- 移动端浏览器普遍支持，但仍需注意使用方式；
