通配符选择器*会显著拖慢样式计算（recalculate style）阶段，因其无索引、需全量遍历所有dom节点（含script、meta、注释等），500+节点时易超20ms，引发卡顿与首屏延迟。
会，但不是拖慢“下载”或“解析HTML”的速度，而是显著拖慢样式计算（Recalculate Style）阶段——尤其在DOM节点超过500个时，* { box-sizing: border-box; } 这种单条规则就可能让该阶段耗时突破20ms，直接卡住首次内容绘制（FCP）。
浏览器匹配CSS是从右往左的，* 没有索引、无法剪枝，只能逐个检查每个节点（包括 <script></script>、<meta>、注释甚至伪元素生成节点），现代引擎虽能跳过 display: none 子树，但对深层嵌套结构（如富文本生成的表格）仍无解。
为什么*会让Recalculate Style时间飙升
浏览器必须为每个DOM节点确认是否被*覆盖，哪怕它只出现在一个重置文件末尾。这导致：
- 无法复用已计算的继承值——
html { font-size: 16px; }本可自然继承，但* { font-size: 14px; }强制重算每个节点 - 后续同级选择器变慢——浏览器得先排除
*干扰，才能缓存匹配结果 -
*::before更糟：一个元素 → 生成两个伪节点 → 实际匹配目标翻倍，500节点变1500+
* { margin: 0; padding: 0; }不是重置，是埋雷
它用最低特异性强行覆盖一切，但破坏的是真实交互逻辑：
-
<input type="text">失去默认内边距，点击区域收缩，移动端难触发 -
<select></select>高度塌缩，下拉箭头错位 -
<svg></svg>图标被压缩变形，viewBox失效 - 第三方组件（如
react-datepicker）依赖默认margin布局，一加*，弹窗立刻偏移 -
* { user-select: none; }连<textarea></textarea>和代码块都不可复制
真正可用的替代方案，不用改HTML结构
用语义化类名 + :where() 降权，兼顾复位与性能：
/* 推荐：精准控制，且不增加特异性 */
:where(h1, h2, h3, p, ul, ol, li, blockquote) {
margin: 0;
padding: 0;
}
<p>/<em> 推荐：box-sizing仅作用于容器类，避免全量扫描 </em>/
.container, .card, .form-group {
box-sizing: border-box;
}</p><p>/<em> 禁用user-select？只针对非文本区域 </em>/
.no-select {
user-select: none;
}</p>
如果项目已用*，别急着删——先用DevTools Performance面板录一段首屏加载，看Recalculate Style是否占高比例；再用Coverage工具查哪些CSS实际未被使用。替换不是一刀切，而是从高影响区域（如首页、列表页）开始收敛。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
