通配符选择器*最合理用途是重置box-sizing和font-smoothing；它不应用于全局清margin/padding或样式统一，因匹配范围过大拖慢渲染且破坏语义与可访问性。

通配符选择器 * 真正的作用是重置默认样式，不是“给所有元素加样式”

很多人误以为 * 是为了“统一加颜色/字体”，其实它最合理、最主流的用途只有一个：清除浏览器默认的 margin/padding。所有现代 CSS 重置方案（如 Normalize.css、Reset.css）都从这里起步——因为不同浏览器对 body、h1、ul 等元素的默认外边距和内边距不一致，直接导致布局错位。

• * { margin: 0; padding: 0; } 是常见写法，但过于粗暴：它也会重置 input、button、textarea 的默认内边距，导致表单控件文字贴边、点击区域变小
• 更稳妥的做法是只重置容器类元素：*, *::before, *::after { box-sizing: border-box; } —— 这条几乎无副作用，且让 width/height 计算更可预测
• 真正需要清 margin/padding 时，推荐用语义化组合：body, h1, h2, h3, p, ul, ol, dl, pre, form { margin: 0; padding: 0; }

为什么 * 会拖慢渲染性能？关键在“匹配范围不可控”

浏览器解析 CSS 时，* 会强制对 DOM 中每一个节点做样式匹配，包括 script、meta、noscript 这些本不该渲染的元素。尤其在大型 SPA 页面中，DOM 节点动辄上千，* 会显著增加样式计算时间。

• Chrome DevTools 的 “Rendering” 面板中开启 “Paint flashing”，你会看到整个页面频繁高亮——这往往是 * 或深层后代选择器惹的祸
• 移动端低端设备上，* { transition: all .3s; } 这类写法极易引发卡顿，因为每个元素都绑定了过渡监听
• 替代方案：用 html 或 body 作为根容器统一继承，例如 body { font-family: sans-serif; line-height: 1.5; }，再让子元素 inherit

实际项目中，* 最该被替换的三种写法

很多团队仍在用通配符“偷懒”，结果埋下维护雷。下面这些写法看似简洁，实则危险：

/* ❌ 危险：影响所有伪元素，可能破坏 icon 字体或 ::marker 样式 */
*::before, *::after {
  box-sizing: border-box;
}
/ ✅ 正确：只作用于可渲染容器 /
,
::before,
*::after {
box-sizing: border-box;
}
/ ❌ 危险：重置了 SVG 的 viewBox 缩放行为 /
{
transform: none !important;
}
/ ✅ 正确：仅重置需要动画的组件 /
.animated-element {
transform: none;
}
/ ❌ 危险：强制所有元素 display: block，破坏 inline 元素语义 /
{
display: block;
}

记住：* 没有语义，没有上下文，它只回答“是不是一个节点”，不关心“它该是什么”。而现代 CSS 工程强调的是“意图明确”——你想要的是“所有表单控件尺寸一致”，就该写 input, select, textarea { box-sizing: border-box; }，而不是靠 * 碰运气。

真正值得全局设置的，其实是 box-sizing 和 font-smoothing

这两个属性影响广泛、副作用极小，且浏览器兼容性好（IE8+），是 * 唯二值得保留的使用场景：

*,
*::before,
*::after {
  box-sizing: border-box;
}
/ 可选：提升文本清晰度（尤其 macOS / iOS） /
{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

• box-sizing: border-box 让 width 包含 padding/border，避免反复计算；加上 ::before/::after 是因为很多 UI 库（如 Bootstrap）依赖伪元素做装饰，它们也需统一盒模型
• font-smoothing 属于纯视觉增强，不影响布局，且加在 * 上比逐个元素写更省事
• 其他所谓“全局设置”，比如 * { outline: none; }，会直接破坏键盘可访问性（a11y），必须禁用

通配符选择器不是语法糖，它是 CSS 中少有的“无差别暴力匹配”机制。用得好，能快速建立基线；用得滥，会让样式失控、调试困难、性能下滑——它的分寸感，不在“能不能写”，而在“为什么非得写它”。