<p>通配符选择器 的核心用途是“打底重置”，最合理用法为 { box-sizing: border-box; }；* { margin: 0; padding: 0; } 已过时，易破坏语义元素默认样式；性能敏感或结构明确场景应避免使用，推荐用具体选择器替代。</p>
通配符选择器 * 的真实作用：不是“统一加样式”，而是“打底重置”
它最合理、最被主流方案采纳的用途只有一个：* { 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 后台），
*会强制浏览器为每个节点做样式匹配，包括<script></script>、<meta>这类不可见元素，显著拖慢 CSSOM 构建 - 写了
* { transition: all .3s; }—— 每个元素都监听属性变化，移动端低端机极易卡顿，且无法精准控制哪些属性需要过渡 - 试图用
.card *统一设置卡片内所有子元素行高/颜色 —— 它会把img、svg、iframe全卷进来，而你真正想控制的只是文本类元素 - 用
* { font-family: "xxx"; }覆盖全局字体 —— 字体继承本可通过body { font-family: ...; }+inherit更轻量实现，*反而干扰code、pre等需等宽字体的语义表达
更安全的替代方案：用具体选择器守住边界
真正需要“清除默认边距”时，应限定语义范围：
立即学习“前端免费学习笔记（深入）”；
*,
*::before,
*::after {
box-sizing: border-box;
}
<p>/<em> 只重置典型内容容器，默认间距 </em>/
body,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre,
ul, ol, dl, dd,
form, fieldset, legend,
table, th, td,
hr,
address,
figure,
figcaption {
margin: 0;
padding: 0;
}若目标是组件内部样式（如文章区域），优先用后代选择器：
- ✅ 推荐：
.article-content p, .article-content li, .article-content blockquote—— 明确可控 - ❌ 避免：
.article-content *—— 无差别拉入所有子节点，含script标签和自定义元素
调试时临时加边框？用 outline 更安全：* { outline: 1px solid #f00 !important; }，上线前删掉即可；切勿用 border，它会改变盒模型，干扰真实布局。
容易被忽略的关键细节：权重低 ≠ 安全，反而更难调试
* 的特异性（specificity）为 0，看似“容易被覆盖”，实则带来隐性问题：
- 当你写
p { margin-top: 1em; }，它确实会覆盖* { margin: 0; }，但若某处又加了.section p { margin: 0; }，你就得翻三处才能理清为什么段落没顶边距 - DevTools 中鼠标悬停样式时，
*规则常排在最底部，但它的影响却渗透到每一层，排查时容易误判来源 - 配合 CSS-in-JS 或 Shadow DOM 时，
*可能意外穿透作用域，破坏封装性
真正该警惕的，从来不是“能不能用”，而是“用了之后，谁来负责收尾”。
