【CSS篇】伪类与伪元素的区别与作用详解

在 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 及以下）不支持伪类和伪元素；
• 移动端浏览器普遍支持，但仍需注意使用方式；