通配符选择器 * 不应作为css重置起点，因其匹配所有元素、损害性能、破坏默认样式且无法区分语义元素；真正可靠的方案是使用 all: unset（配合白名单）、revert 或 normalize.css 等专用库。
用 * 选择所有元素，但别乱用重置
* 确实能选中页面里每一个元素，包括 html、body、div、span，甚至 ::before 和 ::after 伪元素（取决于浏览器）。但它不是“重置 CSS”的合理起点——现代项目基本不用它做全局重置，因为副作用太明显。
- 它会匹配所有元素，连 SVG、
input、button这类有强默认样式的控件也不放过 - 浏览器对
*的优先级计算开销比html或body高，尤其在深层嵌套 DOM 中影响渲染性能 - 它无法区分原生语义元素和自定义组件，容易把 Web Component 内部样式也一并覆盖
为什么 * { margin: 0; padding: 0; } 是个坏主意
这个写法看似干净，实际会破坏很多默认行为：
-
textarea和input[type="text"]失去默认内边距，文字贴边难读 -
fieldset和legend的边框和间距全崩，表单可访问性下降 -
details/summary的折叠交互样式被抹平 - 所有伪元素（比如
li::marker）的默认缩进和符号消失，列表变异常
更糟的是：它不重置 box-sizing，所以后续写 width: 100% 时仍可能溢出。真要归零，至少得配一行 box-sizing: border-box，但依然治标不治本。
真正靠谱的重置方案：用 all: unset 或专用库
all: unset 比 <em></em> 更精准：它把一个元素的所有 CSS 属性重置为初始值或继承值，且不波及伪元素（除非显式选中）。但它也不能直接怼到 上——否则又回到上面的问题。
立即学习“前端免费学习笔记（深入）”；
- 只应在特定容器内使用，例如：
.card > <em></em>或.dialog__content :not(form) - 对表单控件要加白名单：
input, select, textarea, button { all: revert; }（revert会回退到浏览器默认样式） - 更推荐用
normalize.css或modern-normalize：它们只修正跨浏览器差异，不粗暴清空
示例（安全局部重置）：
.form-reset * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.form-reset input,
.form-reset select,
.form-reset button {
all: revert;
}通配符选择器的唯一合理用途：调试和隔离
日常开发中，* 基本只该出现在两个地方：
- DevTools 里临时输入
* { outline: 1px solid red !important; }查看元素边界 - CSS 沙箱环境（如 Shadow DOM 样式隔离）中配合
:host使用：:host * { box-sizing: border-box; } - 绝对不要把它写进生产 CSS 文件的顶层作用域
真正影响布局的，从来不是“选了多少”，而是“重置了什么”以及“谁该被豁免”。漏掉一个 fieldset 或误伤一个 video 的 controls 样式，修复成本远高于一开始避开 *。
