总结

1. 选择对象不同

内容	说明
伪类作用对象	元素的状态或位置
伪元素作用对象	元素的一部分内容或虚拟内容
是否新增节点	均不新增节点
常用符号	:（伪类）、::（伪元素）
推荐场景	伪类用于交互与状态控制；伪元素用于样式修饰与内容插入

---

31. 伪类和伪元素的区别

一、基本定义

类型	定义
伪类（Pseudo-class）	用于表示元素的某种状态或位置，如链接的点击状态、鼠标悬停、第一个子元素等。
伪元素（Pseudo-element）	用于选择元素的某一部分内容或虚拟部分，如首字母、首行、插入内容等。

---

二、核心区别对比表

对比维度	伪类（Pseudo-class）	伪元素（Pseudo-element）
表示符号	单冒号 :	双冒号 ::（部分旧写法也用单冒号）
作用对象	元素本身的状态或位置	元素的某一部分或虚拟内容
是否新增 DOM 节点	❌ 不新增节点	❌ 不新增节点（但创建虚拟内容）
是否可交互	✅ 可以触发交互（如 :hover、:active）	❌ 不可交互（仅样式控制）
是否可被脚本访问	✅ 可以通过 JS 控制	❌ 无法通过 JS 控制（非真实 DOM）
常见示例	:hover、:nth-child()、:focus	::before、::after、::first-line

---

三、常见伪类示例

伪类	描述
:hover	鼠标悬停时的状态
:active	元素被激活时（如点击）
:focus	元素获得焦点时
:visited	已访问的链接
:first-child	第一个子元素
:last-child	最后一个子元素
:nth-child(n)	第 n 个子元素
:not(selector)	排除某个选择器匹配的元素

示例：

a:hover {color: red;
}li:nth-child(odd) {background-color: #f0f0f0;
}

---

四、常见伪元素示例

伪元素	描述
::before	在元素内容前插入内容
::after	在元素内容后插入内容
::first-line	选择元素的第一行文本
::first-letter	选择元素的第一个字符
::selection	选择用户选中的文本部分
::placeholder	输入框的占位符文本

示例：

p::first-letter {font-size: 2em;float: left;
}.button::after {content: " ➤";color: blue;
}

---

五、使用场景对比

场景	推荐方式	说明
鼠标悬停效果	:hover	实现按钮、链接的交互效果
列表奇偶行样式	:nth-child()	表格、列表的视觉优化
插入装饰内容	::before / ::after	图标、提示、装饰性内容
首字下沉效果	::first-letter	文章、杂志类页面美化
自定义选中样式	::selection	提升用户选中文本的视觉体验
表单占位符美化	::placeholder	统一输入框风格

---

六、注意事项

注意点	说明
::before 和 ::after 必须配合 content使用	否则不会显示
伪类可以组合使用	如 a:hover::after 是合法的
伪元素不能绑定事件	因为不是真实 DOM
双冒号是标准写法	用于区分伪类和伪元素（但浏览器兼容旧写法）

---