通配符选择器必须置于CSS文件最顶部且仅设box-sizing、margin、padding；禁用color等继承属性，避免可访问性问题；需显式包含::before、::after；不可用后代选择器替代，且在CSS-in-JS或Shadow DOM中失效。
通配符选择器必须放在 CSS 文件最顶部
它不参与特异性竞争，权重为 (0,0,0,0)，一旦被后续任意规则（哪怕只是 div）声明同名属性，就会立即失效。常见错误是把它写在 .header { } 后面，结果 margin: 0 根本没生效——不是语法错，是顺序错。
真正起作用的写法只有一种：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}注意：这个 * 块必须是整个样式表里的第一条规则，不能有注释、@import 或其他 CSS 声明挡在前面。
只设 box-sizing、margin、padding，禁用 font-family/color 等继承属性
设置 color: #333 或 font-family: sans-serif 看似省事，实则埋雷：所有子元素（包括 button、input、option）都会继承，而这些元素的默认样式往往依赖系统字体和颜色，强行覆盖会导致可访问性下降、表单控件失真、高对比度模式失效。
立即学习“前端免费学习笔记（深入）”；
- ✅ 安全项：
box-sizing、margin、padding—— 它们不继承，且重置后不影响语义与交互 - ❌ 危险项：
color、font-size、line-height、font-family—— 可继承，易污染，且浏览器默认值本身就有合理意图 - ⚠️ 特别注意：
*::before, *::after必须显式加入选择器链，否则伪元素不会应用box-sizing
推荐写法：
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
*,
*::before,
*::after {
box-sizing: border-box;
}不要用 .container * 或 body * 替代 *
这类写法不是通配符选择器，而是后代选择器，性能更差：浏览器需遍历 .container 下所有节点并逐个匹配，而原生 * 是渲染引擎级优化路径。更重要的是，它失去了“全局 reset”的意义——漏掉 html、body、head 内的 style 标签等顶层节点，导致部分默认 margin 依然存在。
典型误用场景：
-
body * { margin: 0; }——html元素本身仍有默认 margin，页面仍可能上下溢出 -
.app * { box-sizing: border-box; }—— 若某组件动态挂载到body外（如 toast、modal），盒模型就失控
真实项目里，只要用了 CSS-in-JS 或 Shadow DOM，* 就天然失效——它只作用于当前样式作用域内的普通 DOM，这点常被忽略。
上线前务必检查是否残留调试用的 *
加 outline: 1px solid red 或 border: 1px dashed blue 是调试利器，但上线时若忘记删，会直接暴露给用户。更隐蔽的问题是：某些团队用 * 强制设置 vertical-align: top 来解决内联元素基线对齐，却没意识到它会让所有 img、input、svg 失去默认对齐行为，最终在复杂表单中引发难以复现的错位。
建议做法：
- 把调试用的
*单独抽成debug.css，开发环境@import，构建时排除 - CI 流程中加入简单 lint 规则：禁止生产环境 CSS 文件中出现
* { outline:或* { border: - 用 DevTools 的 “Computed” 面板反查：随便点一个元素，看
box-sizing是否来自*，确认是否按预期生效
真正的难点不在写法，而在于理解 * 是个“无条件广播”，它不挑元素、不看上下文、不区分语义——用它，就得接受它对每个节点的绝对影响力，包括你还没写出来的那些。
