通配符选择器*最合理用途是重置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;
}
<p>/<em> ✅ 正确：只作用于可渲染容器 </em>/
<em>,
</em>::before,
*::after {
box-sizing: border-box;
}</p><p>/<em> ❌ 危险：重置了 SVG 的 viewBox 缩放行为 </em>/</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a>
<p>使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p>
</div>
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><ul><li>{
transform: none !important;
}</li></ul><p>/<em> ✅ 正确：仅重置需要动画的组件 </em>/
.animated-element {
transform: none;
}</p><p>/<em> ❌ 危险：强制所有元素 display: block，破坏 inline 元素语义 </em>/</p><ul><li>{
display: block;
}记住：* 没有语义，没有上下文，它只回答“是不是一个节点”，不关心“它该是什么”。而现代 CSS 工程强调的是“意图明确”——你想要的是“所有表单控件尺寸一致”，就该写 input, select, textarea { box-sizing: border-box; }，而不是靠 * 碰运气。
真正值得全局设置的，其实是 box-sizing 和 font-smoothing
这两个属性影响广泛、副作用极小，且浏览器兼容性好（IE8+），是 * 唯二值得保留的使用场景：
*,
*::before,
*::after {
box-sizing: border-box;
}
<p>/<em> 可选：提升文本清晰度（尤其 macOS / iOS） </em>/</p><ul><li>{
-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 中少有的“无差别暴力匹配”机制。用得好，能快速建立基线；用得滥，会让样式失控、调试困难、性能下滑——它的分寸感，不在“能不能写”，而在“为什么非得写它”。
