CSS中pseudo-classes伪类与pseudo-elements伪元素选择器的适用场景分别是什么？

核心本质差异 #

• 伪类选择器（以单冒号:开头）：选中的是DOM树中已经存在的真实元素，作用是匹配元素的特定状态/位置，不会生成新的节点。
  常见用法举例：
  • :first-child 匹配父元素下的第一个子元素
  • :hover 匹配鼠标悬浮状态下的元素
  • :checked 匹配被选中的单选框/复选框
• 伪元素选择器（以双冒号::开头）：选中的是DOM树中不存在的虚拟节点，相当于通过CSS额外生成一个新元素，可单独设置内容、样式，不会出现在原始HTML源码中。
  常见用法举例：
  • ::before 在目标元素内部最前方插入虚拟元素
  • ::after 在目标元素内部最后方插入虚拟元素
  • ::first-letter 匹配块级元素内容的第一个字符

常见写法误区说明 #

你看到的单冒号:before/:after属于CSS2时代的历史兼容写法，当年规范还没有区分伪类和伪元素的语法，所以两者都用单冒号。现代浏览器为了兼容旧代码依然支持这种写法，但从CSS3规范开始，已经明确要求伪元素统一用双冒号语法和伪类做区分，写新代码时直接用::before/::after即可。

快速选择技巧 #

• 不需要新增元素，只是给已有元素加特殊状态的样式，选伪类
• 需要额外加装饰性元素（比如小图标、引号、悬浮三角），不想改动HTML结构，选伪元素

内容的提问来源于stack exchange，提问作者Amir2170