伪类选择器匹配元素状态，伪元素选择器创建渲染层虚构节点；伪类用单冒号，伪元素必须用双冒号；伪类可叠加，伪元素每元素限::before和::after各一个；伪元素内容不可访问、不可交互、不被seo索引。
伪类选择器匹配的是已有元素的某种状态或位置，伪元素选择器创建的是渲染层虚构的新节点——这不是风格偏好问题，而是语义和行为的根本差异。
伪类用单冒号，伪元素必须用双冒号
CSS3 明确规定：:hover、:first-child 等是伪类，只能用单冒号；::before、::placeholder 等是伪元素，规范写法是双冒号。虽然浏览器仍支持 :before 这类旧写法，但存在实际风险：
-
a::hover会直接失效（伪元素语法不能用于状态） -
input:placeholder在现代浏览器中被忽略（:placeholder是非法写法，只有::placeholder有效） - 混用导致团队协作时难以区分意图，比如
p:first-letter看似像结构选择，实则是过时的伪元素写法
伪类可叠加，伪元素有硬性数量限制
一个元素可以同时满足多个状态，因此伪类支持自由组合：
button:hover:active:focus { outline: 2px solid #007bff; }
但伪元素不是“状态”，而是“插入内容”或“截取片段”，规范强制约束：
- 每个选择器最多允许一个
::before和一个::after—— 它们算两个独立伪元素 -
div::before::after是非法语法，整条规则会被浏览器丢弃 -
span::first-letter::before无效：一旦用了::first-letter，就占用了该元素的伪元素 slot，不能再加其他伪元素
伪元素创建的节点不可访问、不可交互
::before 插入的图标、::selection 高亮的文本、input::placeholder 显示的提示文字，全都不在 DOM 中：
- JavaScript 无法通过
element.querySelector('::before')获取（语法错误） - 不能绑定事件，
click或focus都无法触发 - 不参与 tab 键导航顺序，屏幕阅读器通常忽略它们
-
content属性值若为纯文本，不会被搜索引擎索引（SEO 影响）
真正容易被忽略的点是：伪元素不是“样式修饰”，而是“内容注入”。当需要可访问性、可交互性或 JS 控制能力时，必须用真实 HTML 元素替代，而不是强行用 ::before 模拟按钮或图标容器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
