CSS伪类和伪元素有什么区别_伪类伪元素核心概念解析

伪类用于定义元素的特殊状态，如:hover、:focus，不创建新元素；伪元素则通过::before、::after等生成虚拟内容，代表元素的特定结构部分，需用content属性插入内容，二者在用途与语法上均有区别。

伪类和伪元素在CSS中看起来相似，都使用单个或双冒号（: 和 ::）来定义，但它们的用途和本质完全不同。理解它们的区别，有助于更精准地控制页面样式。

伪类：描述元素的特殊状态

伪类用于表示元素的特定行为或状态，它并不创建新的元素，而是为处于某种条件下的现有元素应用样式。

常见伪类包括：

• :hover —— 鼠标悬停时的样式
• :focus —— 元素获得焦点时的样式
• :nth-child(n) —— 匹配父元素下第n个子元素
• :first-of-type —— 同类型中的第一个元素
• :visited —— 已访问的链接

例如：

立即学习“前端免费学习笔记（深入）”；

button:hover { background-color: blue; }

这段代码的意思是：当鼠标移到按钮上时，背景变蓝。这里的 :hover 并没有新增任何结构，只是改变了当前按钮在特定交互下的外观。

伪元素：创建虚拟的DOM节点

伪元素用于生成不在HTML中实际存在的内容或结构，它们代表页面中某个元素的特定部分，可以被样式化，就像真实存在一样。

伪元素使用双冒号 :: 开头（虽然单冒号也兼容），以区别于伪类。

常见的伪元素有：

• ::before —— 在元素内容前插入虚拟内容
• ::after —— 在元素内容后插入虚拟内容
• ::first-line —— 元素第一行文本的样式
• ::first-letter —— 元素首字母的样式
• ::selection —— 用户选中文本时的高亮样式

例如：

立即学习“前端免费学习笔记（深入）”；

p::before { content: “▶ “; color: gray; }

这个规则会在每个段落前添加一个灰色的箭头符号，而无需修改HTML结构。::before 创建了一个视觉上的“新元素”，但它并不存在于DOM中。

核心区别总结

关键在于：伪类关注的是“状态”，伪元素关注的是“结构片段”。

• 伪类如 :hover、:disabled 是对已有元素不同状态的响应
• 伪元素如 ::before、::after 是对元素某一部分或附加内容的样式控制
• 语法上，伪类用单冒号 :，伪元素推荐用双冒号 ::（CSS3规范区分）
• 伪元素必须配合 content 属性才能显示生成的内容（除 ::first-line 等例外）

基本上就这些。掌握它们的本质差异，能让你在写样式时更清楚该用哪种方式实现目标，避免混淆和误用。