通配符选择器*应仅用于重置margin、padding和box-sizing，必须置于CSS最顶部，禁用font-family、color等易引发继承污染的属性，避免与!important联用。
* 选择器确实能“一劳永逸”地打底，但它的实际效果远不如看起来那么可控——它匹配所有元素（包括 html、body、::before、::after），且特异性为 (0,0,0,0)，几乎必然被后续任何选择器覆盖。真正关键的不是“能不能用”，而是“在什么位置、配什么规则、防什么副作用”。
为什么 * 在 reset 场景中仍被广泛采用
它解决的是浏览器默认样式不一致这个底层问题，比如 h1 的 margin 在 Chrome 和 Firefox 中可能差 8px，input 的 padding 在 Safari 下会多出 2px。* 提供了一个零成本、无依赖的统一入口：
- 无需引入外部 reset 库，一行声明就能抹平基础差异
- 对
box-sizing的统一尤其有效——border-box让 width/height 可预测，避免“设了 200px 宽却撑到 220px” - 配合
margin: 0; padding: 0;能快速暴露布局中“意外留白”的来源（常是未显式重置的ul、fieldset等）
* 必须放在 CSS 文件最顶部，且不能带条件前缀
顺序决定覆盖关系：* 若写在 .card { ... } 后面，其同名属性（如 color）会被前面更高特异性的规则覆盖；若加了父级限定（如 .container *），就失去全局 reset 意义，且性能更差（需遍历所有 .container 后代）。
- ✅ 正确位置：
*块必须是整个样式表的第一个规则 - ❌ 错误写法：
body * { ... }或div * { ... }—— 这是后代选择器，非通用选择器，且触发重排开销更大 - ⚠️ 注意：某些预处理器（如 Sass）里
* { @extend %reset; }会破坏特异性计算，应避免
哪些规则适合放进 *，哪些绝对不行
* 只该承载“不影响语义、不干扰交互、可被安全覆盖”的基础声明。字体、颜色、背景等视觉属性看似全局，实则极易引发继承污染。
立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐仅保留三项：
margin: 0;、padding: 0;、box-sizing: border-box; - ❌ 禁止写：
font-family、color、background——button、select、textarea会丢失系统默认样式，导致可访问性下降 - ⚠️ 警惕伪元素：
*::before, *::after { box-sizing: border-box; }是冗余的，现代浏览器中伪元素默认不继承box-sizing，且此写法会强制重绘所有伪元素
调试时临时启用 * 的风险点
用 * { outline: 1px solid red !important; } 查边界很高效，但上线前漏删会导致两个严重问题：
- 所有元素强制加 outline，破坏表单控件焦点样式（如
input:focus的蓝色环） -
!important会让后续调试类（如.debug-border）完全失效，因为*的特异性虽低，但!important优先级碾压一切 - 更稳妥的替代方案：
[data-debug] * { outline: 1px solid red; }，通过开关 class 控制作用域
真正难的不是写 *，而是判断哪一行该删、哪一行该锁死、哪一行本就不该放进去——它像一把没鞘的刀，握得越随意，划伤自己的概率越高。
