标准答案
- 伪类选择的是元素的状态、位置或条件，比如 :hover、:focus、:checked、:first-child。
- 伪元素选择的是元素的一部分，或者创建一个虚拟子元素，比如 ::before、::after、::first-line、::selection。
- ::before 和 ::after 必须配合 content 属性才会生成盒子。
- 它们常用于装饰图标、必填星号、清除浮动、边框线、角标和背景装饰。
- 重要业务文本不要只放在伪元素 content 里，因为它可能影响可访问性、复制和翻译，关键内容应该放在真实 DOM 中。
题目解析
一句话区分：伪类是“已有元素处于什么状态”，伪元素是“元素的某个部分或生成的虚拟内容”。
CSS3 推荐伪元素使用双冒号 ::before，伪类使用单冒号 :hover；老代码里可能看到 :before。
代码示例
必填标记这类装饰性内容可以用伪元素。
CSS
.field-label.is-required::after {
content: "*";
margin-left: 4px;
color: #f08a3c;
}
.button:hover {
background: #218557;
}常见误区
- 把 :hover 叫伪元素，把 ::before 叫伪类。
- 忘记 ::before 和 ::after 需要 content 才会生成。
- 把重要业务文案放进伪元素，导致可访问性和复制体验变差。