Q1
★ ★ ★ ★ ★
CSS 伪类与伪元素的区别？
⚡ 速记答案（30 秒）
伪类（:hover / :nth-child 等）选中元素的某种状态，本质还是选中已有元素；伪元素（::before / ::after）选中元素中的虚拟子元素（不在 DOM 中）。推荐双冒号 :: 表示伪元素，单冒号 : 表示伪类。
📖 详细讲解
标准面试回答（推荐记住）
伪类用单冒号，比如 :hover、:nth-child，它们选中的是元素的某种状态或位置关系，本质上还是选中已有的 DOM 元素。伪元素用双冒号，比如 ::before、::after、::first-line，它们选中的是元素中的虚拟子元素，这些元素不在 DOM 树中。写法上推荐用双冒号表示伪元素以区分，但为了兼容老浏览器，单冒号也能用。
伪类 vs 伪元素
| 特性 | 伪类 | 伪元素 |
|---|---|---|
| 符号 | 单冒号 :hover |
双冒号 ::before |
| 作用 | 选中元素的状态 | 创建虚拟子元素 |
| DOM | 选中已有元素 | 不在 DOM 中 |
常见伪类
/* 状态伪类 */
a:hover { color: red; }
input:focus { border-color: blue; }
input:disabled { opacity: 0.5; }
/* 结构伪类 */
li:first-child { font-weight: bold; }
li:nth-child(2n) { background: #f5f5f5; }
p:not(.special) { color: gray; }
常见伪元素
/* 前后插入内容 */
.quote::before { content: '"'; }
.quote::after { content: '"'; }
/* 首行首字母 */
p::first-line { font-weight: bold; }
p::first-letter { font-size: 2em; }
/* 选中文本 */
::selection { background: yellow; }
✅ 面试要点
- •伪类选状态，伪元素创建虚拟元素
- •推荐用双冒号 :: 表示伪元素
- •伪元素必须有 content 属性（即使为空）
💻 代码示例
伪元素实现装饰效果
🎨 效果预览