伪类和伪元素不能嵌套，但可组合使用；如:hover::before是合法链式限定，伪类作用于真实元素，伪元素附加内容，顺序解析而非嵌套。
伪类和伪元素能嵌套吗？不能，但可以组合使用
CSS 里 :hover 和 ::before 看起来像能写成 :hover::before 就是“嵌套”，其实不是。这是合法的选择器组合，浏览器按顺序解析：先匹配处于 :hover 状态的元素，再对其生成 ::before 伪元素。关键在“顺序”和“作用对象”——伪类修饰真实元素，伪元素附加内容，二者不嵌套，但可链式限定。
-
:focus-within::after合法：父容器获得焦点时，才渲染子级的::after -
::before:hover非法：伪元素本身无法触发交互状态 - Chrome 110+ 支持
input:is(:valid)::after，但:is()是伪类，不能包伪元素
常见误用：用 ::before 模拟图标却破坏可访问性
很多同学用 ::before + content: "★" 或字体图标替代 <svg></svg>，省事但埋雷。伪元素默认不可聚焦、无语义、读屏器通常忽略——尤其当它承载操作含义（如“删除项”）时，等于把功能藏起来了。
- 如果图标有交互（如点击展开），必须用真实元素包裹，或加
aria-hidden="false"+role="button" - 纯装饰性图标才适合
::before，且需确保content为空或仅含空格：content: "" - 字体图标（如 Font Awesome）用伪元素加载时，要配
font-display: optional，否则 FOUT/FOIT 明显
:not() 里能写伪元素吗？不能，但可以绕过
:not(::before) 会直接报错，因为 :not() 只接受简单选择器（即能匹配真实 DOM 节点的）。想实现“除了带箭头的按钮，其余都加边框”，不能靠否定伪元素，得换思路。
- 给目标元素加 class（如
.btn--has-arrow），然后写button:not(.btn--has-arrow) - 用属性选择器模拟：给需要排除的按钮加
data-has-arrow，再写button:not([data-has-arrow]) - 注意
:not(:disabled):not([aria-disabled="true"])这类组合更实用，比硬套伪元素靠谱
性能陷阱：过度使用 ::after + transform 做动画
用 ::after 做下划线、悬浮遮罩、渐变背景很常见，但如果同时加 transform: scale() 或 opacity 动画，且页面有几十个同类元素，会强制触发大量重排重绘——尤其在低功耗设备上卡顿明显。
立即学习“前端免费学习笔记（深入）”；
- 优先用
will-change: transform，但别滥用；只对真正频繁动画的伪元素加 - 避免在
::before里用background-image: url(...)，图片加载会阻塞伪元素渲染 - 复杂动效（如路径描边、波纹）建议用
<svg></svg>内联或 CSS@property（Chrome 119+）控制，比伪元素更可控
:hover::before，而是判断这个视觉效果该不该由 CSS 伪元素承担——它没 DOM 节点，没生命周期，也没事件流。一不留神，就从便利变成债务。 
