CSS 伪类和伪元素有什么区别？常见使用场景有哪些？
简化版
伪类描述元素的状态或结构关系，例如 :hover、:focus、:nth-child()；伪元素描述元素的一部分或生成的虚拟内容，例如 ::before、::after、::first-line。前者选状态，后者造部件。
详细版
- 伪类通常以单冒号书写，表示元素处于某种状态、位置或条件。
- 伪元素通常以双冒号书写，表示选择元素的某个部分或创建虚拟盒子。
::before和::after必须配合 content 才能生成内容。- 伪类适合 hover、focus、checked、disabled、nth-child 等交互和结构样式。
- 伪元素适合装饰线、角标、首字母、占位符样式等不需要额外 DOM 的场景。
完整版教学
记忆钩子：伪类问“这个元素现在是什么状态”，伪元素问“这个元素里面哪一部分”。
一、这题真正考什么
记忆钩子：伪类问“这个元素现在是什么状态”，伪元素问“这个元素里面哪一部分”。
面试官不是只想听定义，而是想看你能不能把 CSS 规则、浏览器渲染、工程维护和用户体验连起来。回答这类题时，先讲机制，再讲例子，最后讲排查方法和边界。
二、底层机制怎么理解
CSS 选择器不仅能选真实 DOM 节点，还能根据状态、结构和虚拟片段匹配样式。伪类不会创建新的盒子，它只是限定匹配条件；伪元素则可能参与渲染树，尤其是 ::before 和 ::after 会生成可布局的匿名内容。
CSS 面试题的关键通常在“规则为什么这样生效”。只要能讲清浏览器按什么顺序匹配、计算、布局和绘制，就不会停留在背属性名的层面。
三、带数字的小推演
一个按钮 hover 时变色应使用 button:hover；按钮左侧加一个装饰圆点可以用 button::before。如果列表第 3 项高亮，用 li:nth-child(3)；如果段落首行加粗，用 p::first-line。
下面把判断过程压成几条可复用规则，面试时可以直接照这个顺序推：
:hover = 状态匹配，不新增 DOM 或盒子
::before + content = 在元素内容前生成伪元素盒子
选择器思路：真实元素 + 条件/虚拟部分 => 最终样式目标四、浏览器处理流程
可以把它放进浏览器处理链路里看：
浏览器解析 DOM
|
选择器匹配真实元素
|
伪类根据状态或结构过滤
|
伪元素生成或匹配虚拟片段
|
进入样式计算和布局绘制流程图能帮你避免两个常见问题：一是把 CSS 属性当成孤立开关，二是忽略父级、上下文和渲染阶段的影响。真正排查线上样式问题时，沿流程定位通常比随机改 CSS 更快。
五、对比表格
| 类型 | 例子 | 用途 |
|---|---|---|
| 伪类 | :hover | 鼠标悬停状态 |
| 伪类 | :nth-child(2n) | 结构位置匹配 |
| 伪类 | :focus-visible | 键盘焦点样式 |
| 伪元素 | ::before | 生成装饰内容 |
| 伪元素 | ::placeholder | 输入占位符样式 |
对比题不要只背结论，要主动补一句“适合什么场景”。CSS 的很多选择没有绝对优劣，只有是否符合布局、可维护性、性能和可访问性目标。
六、工程实践和排查思路
- 不要用伪元素承载关键业务文本，屏幕阅读器和复制行为可能不符合预期。
nth-child按兄弟节点位置匹配，不是按类名过滤后的第几个匹配。- 使用 DevTools 时要同时看 matched rules、computed style、layout、accessibility 和 event listeners，避免只盯着源码。
- 组件库项目要把这类规则沉淀成 token、基础样式或 lint 约束，否则同类问题会反复出现。
七、常见误区与追问
- 误区：伪类和伪元素只是写法单冒号和双冒号的区别。 需要补上浏览器机制、适用条件和反例，避免把经验口诀当成规则本身。
- 误区：::before 不写 content 也会显示。 需要补上浏览器机制、适用条件和反例，避免把经验口诀当成规则本身。
- 误区：伪元素可以完全替代真实 DOM。 需要补上浏览器机制、适用条件和反例，避免把经验口诀当成规则本身。
- 追问：:nth-child 和 :nth-of-type 有什么区别？ 先给判断标准，再结合代码、浏览器行为和工程约束说明取舍。
- 追问：:focus 和 :focus-visible 怎么选？ 先给判断标准，再结合代码、浏览器行为和工程约束说明取舍。
- 追问：为什么装饰内容适合用伪元素？ 先给判断标准，再结合代码、浏览器行为和工程约束说明取舍。
八、加强记忆
“类是状态，元素是部件”。面试时先给定义，再举 hover、nth-child、before、placeholder 四个例子，基本就能覆盖主干。
复习 HTML/CSS 高频题时，可以固定按“定义、触发条件、浏览器流程、代码例子、工程风险、排查工具”六步组织答案。这样不会只停留在背概念，也更像真实前端开发者。