通配符选择器 的核心用途是“打底重置”，最合理用法为 { box-sizing: border-box; }；* { margin: 0; padding: 0; } 已过时，易破坏语义元素默认样式；性能敏感或结构明确场景应避免使用，推荐用具体选择器替代。
通配符选择器 * 的真实作用：不是“统一加样式”，而是“打底重置”
它最合理、最被主流方案采纳的用途只有一个：* { box-sizing: border-box; }。这条规则让所有元素的宽高计算包含 padding 和 border，大幅降低布局意外——比如设 width: 100px; padding: 10px; 时，元素实际宽度仍是 100px，而非 120px。现代框架（如 Bootstrap 5+、Tailwind 默认配置）也默认启用它，因为它副作用极小、收益明确。
至于 * { margin: 0; padding: 0; }，虽常见但已属过时做法：它会抹掉 input、button、textarea 的默认内边距，导致文字贴边、点击热区缩水；也会清掉 blockquote、fieldset 等语义化容器的合理间距，反而增加后续修复成本。
什么时候坚决不建议用 *：性能敏感或结构明确的场景
在以下情况中，* 不是省事，而是埋雷：
- 页面 DOM 节点超过 500 个（尤其 SPA 或 CMS 后台），
*会强制浏览器为每个节点做样式匹配，包括、这类不可见元素，显著拖慢 CSSOM 构建 - 写了
* { transition: all .3s; }—— 每个元素都监听属性变化，移动端低端机极易卡顿，且无法精准控制哪些属性需要过渡 - 试图用
.card *统一设置卡片内所有子元素行高/颜色 —— 它会把img、svg、iframe全卷进来，而你真正想控制的只是文本类元素 - 用
* { font-family: "xxx"; }覆盖全局字体 —— 字体继承本可通过body { font-family: ...; }+inherit更轻量实现，*反而干扰code、pre等需等宽字体的语义表达
更安全的替代方案：用具体选择器守住边界
真正需要“清除默认边距”时，应限定语义范围：
立即学习“前端免费学习笔记（深入）”；
