CSS通配符选择器样式重置详解

CSS通配符选择器（*）虽能匹配页面中所有元素，但绝非安全可靠的全局样式重置方案——它严重拖累渲染性能、粗暴抹除表单控件、列表标记、折叠组件等关键默认样式，破坏可访问性与语义化表现，且无法区分原生元素与Web Components；真正稳健的做法是摒弃*的滥用，转而采用精准可控的策略：在局部容器中结合all: unset与白名单豁免关键元素（如input、button），或直接引入normalize.css等成熟库进行跨浏览器差异修正；日常开发中，*仅宜用于调试轮廓或Shadow DOM沙箱隔离，切勿出现在生产环境的顶层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 比 更精准：它把一个元素的所有 CSS 属性重置为初始值或继承值，且不波及伪元素（除非显式选中）。但它也不能直接怼到 上——否则又回到上面的问题。

• 只应在特定容器内使用，例如：.card > 或 .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 样式，修复成本远高于一开始避开 *。

本篇关于《CSS通配符选择器样式重置详解》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！