为什么通配符选择器*在大型CSS项目中慎用？-css教程-PHP中文网

通配符选择器*会强制全量扫描每个dom节点，导致样式计算性能严重下降，尤其在低端设备上recalculate style耗时暴涨，且破坏语义与继承；应改用:where()、根继承或类名控制等替代方案。

为什么通配符选择器*在大型css项目中慎用？

通配符选择器 * 会强制全量扫描每个 DOM 节点

浏览器匹配 CSS 选择器是从右往左的，而 * 没有索引、无法剪枝，必须逐个检查每个节点是否匹配——包括 <script></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 中，* 还会跨封装边界触发额外检查，开销再翻倍

* 会破坏真实交互逻辑和继承链

* 的低特异性不是优点，而是隐患：它用最低权重强行覆盖一切，却无视语义与行为差异。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

<input type="text"> 失去默认 padding，点击区域收缩，移动端难触发
<select></select> 高度塌缩，原生下拉箭头错位
<svg></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></style> 或 Shadow DOM 内，它依然会触发全量扫描——因为匹配逻辑不看作用域，只看是否存在于当前文档树中。