总结
- 选择对象不同
| 内容 | 说明 |
|---|
| 伪类作用对象 | 元素的状态或位置 |
| 伪元素作用对象 | 元素的一部分内容或虚拟内容 |
| 是否新增节点 | 均不新增节点 |
| 常用符号 | :（伪类）、::（伪元素） |
| 推荐场景 | 伪类用于交互与状态控制；伪元素用于样式修饰与内容插入 |
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 |
| 双冒号是标准写法 | 用于区分伪类和伪元素（但浏览器兼容旧写法） |
