伪类用于定义元素的特殊状态，如: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 等例外）
基本上就这些。掌握它们的本质差异，能让你在写样式时更清楚该用哪种方式实现目标，避免混淆和误用。
