正确运用CSS通用选择器_用星号选择器初始化全局样式

通配符选择器*应仅用于重置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 控制作用域

真正难的不是写 *，而是判断哪一行该删、哪一行该锁死、哪一行本就不该放进去——它像一把没鞘的刀，握得越随意，划伤自己的概率越高。