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