通配符选择器*最合理用途是重置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>
- { transform: none !important; }
/ ✅ 正确：仅重置需要动画的组件 / .animated-element { transform: none; }
/ ❌ 危险：强制所有元素 display: block，破坏 inline 元素语义 /
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- {
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>
- {
-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 中少有的“无差别暴力匹配”机制。用得好，能快速建立基线；用得滥，会让样式失控、调试困难、性能下滑——它的分寸感，不在“能不能写”，而在“为什么非得写它”。
-
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
