通配符选择器 初始化样式易出问题，因无差别匹配所有元素（含 svg、math 等），导致表单控件错位、SVG 压缩、可访问性布局断裂；现代 reset 已弃用 ，改用白名单精准重置。
为什么用 * 做样式初始化容易出问题
通配符选择器 * 会匹配页面中所有元素，包括 html、body、svg、math 等非普通 HTML 元素。它本身没有重置语义，只是「无差别应用样式」，盲目设 margin: 0; padding: 0; 会导致：
– 表单控件（如 input、button）失去默认内边距和行高，文字贴边或垂直错位
– textarea 和 select 高度异常，光标定位偏移
– svg 图标尺寸被意外压缩（因 box-sizing 覆盖）
– 屏幕阅读器相关元素（如 summary）布局断裂
* 在现代 reset 中基本被弃用
主流 reset 方案（如 modern-normalize、sanitize.css）完全不使用 *。它们采用白名单方式，只对已知有默认样式的元素显式归一化，例如：
– 仅重置 h1~h6 的 margin
– 仅对 ol、ul 设 padding-left: 0，保留 li 的自然缩进逻辑
– 对 table 单独处理 border-collapse，而非靠 * 一刀切
如果非要兼容旧项目，* 必须加限制条件
仅在极简原型或内部工具页中临时使用时，可配合属性选择器缩小影响范围：
– 限定作用域：*[class] 或 .reset-root *，避免污染第三方组件
– 排除特定标签：*:not(svg):not(math):not(iframe)（注意 IE 不支持）
– 避免设置 box-sizing：改用 *:where(:not(svg)) + 后续单独声明 html *, html *::before, html *::after（更安全）
– 绝不设置 font-size 或 line-height，这两项会破坏继承链
/* 推荐的轻量级替代写法（非 *） */
:where(html, body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, address, dl, ol, ul) {
margin: 0;
}
:where(ol, ul) {
padding-left: 0;
}
:where(input, button, textarea, select) {
margin: 0;
padding: 0.375em 0.75em;
}
真正该关注的是继承与层叠控制点
比 * 更关键的是控制根节点的初始值：
– 在 :root 或 html 上设 box-sizing: border-box 并用 *::before, *::after 继承（这是唯一合理用到 * 的地方）
– 所有字体相关重置应集中在 html 或 body，而非扩散到每个子元素
– rem 基准必须通过 html { font-size: 100% } 锚定，不是靠 * 拦截
重置的本质是「有选择地消除差异」，不是「无差别抹平一切」。通配符越早从 reset 文件里删掉，后续调试表单、SVG、可访问性问题就越少。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
