CSS通配符选择器*的常见用法有哪些

CSS通配符选择器 * 因无差别匹配所有元素（包括svg、math、表单控件等），极易引发表单错位、SVG压缩、可访问性布局断裂等隐蔽问题，现代主流重置方案（如modern-normalize）已全面弃用它，转而采用白名单式精准重置；若必须使用，也需严格限定作用域、排除敏感标签或改用更安全的 :where() 替代，而真正关键的是在根节点控制 box-sizing、字体继承和 rem 基准——重置的本质是有选择地消除差异，而非靠 * 一刀切抹平一切。

为什么用 * 做样式初始化容易出问题

通配符选择器 * 会匹配页面中所有元素，包括 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、可访问性问题就越少。

到这里，我们也就讲完了《CSS通配符选择器*的常见用法有哪些》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！