通配符选择器 * 会显著拖慢首次样式计算，因为它强制浏览器遍历所有 dom 节点（含 script、meta、注释），无索引可依、阻断优化、引发层叠冲突，并在 dom 规模增大时导致掉帧和首屏延迟。
通配符选择器 * 会强制浏览器遍历每一个 DOM 节点（包括 <script></script>、<meta>、注释节点），哪怕只写了一条 * { box-sizing: border-box; }，也会显著拖慢首次样式计算。
为什么 * 会让 Recalculate Style 时间飙升
浏览器匹配 CSS 选择器是从右往左的，而 * 没有索引可依，无法跳过任何节点。在 DOM 超过 500 个时，Recalculate Style 阶段很容易突破 20ms，直接导致掉帧和首屏延迟。
- 它不区分渲染/非渲染节点：连
<script></script>标签也要检查是否要应用margin: 0 - 搭配伪元素更糟：
*::before会让浏览器为每个元素强制生成并匹配一个伪节点，500 个元素 → 实际处理 1000+ 匹配目标 - 它阻断浏览器优化：比如继承属性判断、样式缓存复用，后续同级选择器也会变慢——因为浏览器必须确认没被
*覆盖
* { margin: 0; padding: 0; } 看似方便，实则埋雷
这不是“清除了默认样式”，而是用最低特异性规则强行覆盖所有元素，极易引发意料外的层叠冲突。
- 继承权重是
NULL，而*权重是0，所以* { color: green; }会压过父级div { color: red; }下的子span继承色 - 第三方组件（如
react-datepicker）依赖默认margin布局，*一加，日历弹窗就错位 - 移动端输入框、
<select></select>等原生控件可能因padding: 0失去可点击区域，影响可访问性
真正可用的替代方案，不是“少用”，而是“换写法”
现代项目里，全局归一化需求依然存在，但应通过更可控、可索引的方式达成。
- 盒模型重置优先用：
html { box-sizing: border-box; }+*::before, *::after { box-sizing: inherit; }（范围明确，且浏览器对html有专门优化） - 需要清除边距？显式列举常用标签：
body, h1, h2, p, ul, ol, li, form, button, input, textarea { margin: 0; padding: 0; } - 兼容性允许时，用
all: unset局部重置：.card > * { all: unset; }（注意 IE 不支持，iOS Safari 15.4+ 才稳定） - 想降权又保留语义？
:where(*)是现代解法，它不增加特异性，且 Chrome/Firefox 对其做了匹配路径优化
真正难察觉的问题不在写法本身，而在 DOM 规模扩大后——一条 * 规则可能让滚动列表的 Layout 时间从 3ms 涨到 18ms，而你在 DevTools 的 Coverage 面板里甚至看不到它被标记为“未使用”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
