通配符选择器*会强制全量扫描每个DOM节点，导致样式计算性能严重下降，尤其在低端设备上Recalculate Style耗时暴涨，且破坏语义与继承；应改用:where()、根继承或类名控制等替代方案。
通配符选择器 * 会强制全量扫描每个 DOM 节点
浏览器匹配 CSS 选择器是从右往左的，而 * 没有索引、无法剪枝，必须逐个检查每个节点是否匹配——包括 <script>、<meta>、注释节点甚至 <!-- -->。哪怕只写了一条 * { box-sizing: border-box; }，每次样式计算都要遍历全部节点。
- 500 个真实元素 → 实际匹配节点可能达 1500+（因
*::before和*::after各生成一个伪元素） - 低端 Android 或旧 iOS 设备上，
Recalculate Style阶段耗时可从 8ms 暴涨至 40ms+ - Performance 面板中该阶段占比常超 35%，直接阻塞 FCP（首次内容绘制）
*::before 和 *::after 让性能开销翻倍
看似只是加两个伪元素，实际触发的是三重匹配：一个真实元素 + 两个伪元素节点。浏览器不区分“是否渲染”，只要在 DOM 树中存在，就纳入匹配范围。
-
* { margin: 0; }+*::before { content: "" }→ 每个元素变成 3 个匹配目标 - 富文本生成的表格、动态插入的卡片等场景下，DOM 节点数增长快，放大效应更明显
- Shadow DOM 中，
*还会跨封装边界触发额外检查，开销再翻倍
* 会破坏真实交互逻辑和继承链
* 的低特异性不是优点，而是隐患：它用最低权重强行覆盖一切，却无视语义与行为差异。
-
<input type="text">失去默认padding，点击区域收缩，移动端难触发 -
<select>高度塌缩，原生下拉箭头错位 -
<svg>图标被压缩变形，viewBox失效 -
html { font-size: 16px; }本可自然继承，但* { font-size: 14px; }强制重算每个节点，继承值完全失效
替代方案不是“微调 *”，而是彻底绕开
真正有效的做法是放弃全局匹配思维，转为显式声明 + 机制降权。
立即学习“前端免费学习笔记（深入）”；
- 用
:where()包裹语义化标签列表：:where(h1, h2, p, ul, ol, li) { margin: 0; padding: 0; }—— 不增特异性，也不触发全量扫描 - 盒模型改用根继承：
html { box-sizing: border-box; }+*::before, *::after { box-sizing: inherit; } - 第三方组件依赖默认样式？那就别碰
*，改用类名控制：.form-group, .card { box-sizing: border-box; } - 已上线项目别急着删，先用 DevTools 的 Coverage 工具查哪些 CSS 实际未使用，再从首页、列表页等高流量路径开始收敛
真正容易被忽略的一点是：即使你把 * 写在某个局部 <style scoped> 或 Shadow DOM 内，它依然会触发全量扫描——因为匹配逻辑不看作用域，只看是否存在于当前文档树中。
