<p> 选择器会污染全局样式，因其无差别匹配所有元素，易覆盖高优先级规则且调试困难；应通过 :scope 或容器类（如 .my-app ）限制作用域，避免全局使用。</p>
为什么 * 选择器会污染全局样式
通配符选择器 * 默认匹配所有元素，一旦写在全局作用域（比如 style.css 根层级），它就会无差别地应用到整个页面——包括你没预料到的第三方组件、弹窗、图标库里的 svg、甚至 iframe 内部内容（若同源）。更麻烦的是，它的权重虽低（0,0,0,0），但叠加 *::before、*[hidden] 等组合后，容易意外覆盖高优先级规则，且调试时极难定位。
用 :scope 或容器类限制 * 作用范围
现代 CSS 提供了 :scope 伪类，能让 * 只在某个上下文中生效；兼容性稍差时，用显式容器类更稳妥。关键不是禁用 *，而是把它“关进笼子”。
- 推荐写法（支持
:scope的环境）：:root:has(.my-app) { --app-font-size: 16px; } .my-app :scope * { box-sizing: border-box; margin: 0; padding: 0; } - 兼容写法（全浏览器）：
.my-app * { box-sizing: border-box; margin: 0; padding: 0; }注意：这里.my-app必须是包裹整个应用的最外层容器，且不能被其他样式重置掉display或visibility。 - 绝对避免：
* { ... }出现在未包裹的全局 CSS 文件顶部，尤其不要和@import其他库混写在同一文件中。
替代 * 的更安全方案
多数场景下，* 并非不可替代。用语义化、可预测的选择器，反而更利于维护和协作。
- 重置默认样式 → 改用
html或body下的子代选择器：body > * { margin: 0; padding: 0; }这样不会影响嵌套在dialog、portal或动态插入的节点。 - 统一
box-sizing→ 直接写*, ::before, ::after容易漏掉伪元素，改用：html { box-sizing: border-box; } *, ::before, ::after { box-sizing: inherit; }再配合.my-app限定范围，就只影响目标区域。 - 需要“清空所有内边距”的组件封装 → 不用
*，直接在组件根元素上设：.card > * { margin: 0; padding: 0; }更可控，也符合 BEM 命名习惯。
检查和拦截污染的实操建议
光靠写法不够，得有验证手段。尤其在引入 UI 库或微前端场景下，* 污染往往悄无声息。
立即学习“前端免费学习笔记（深入）”；
- Chrome DevTools 中打开
Rendering面板 → 勾选Highlight updated elements，快速观察哪些元素被意外重绘；再切到Computed标签页，搜索margin或box-sizing，看来源是否来自*规则。 - 用 PostCSS 插件
postcss-discard-unused或自定义脚本扫描项目中孤立的*规则：grep -r "\*\s*{" src/ --include="*.css"发现未加前缀的就立刻处理。 - CI 阶段加入 lint：用
stylelint配置selector-no-universal规则，强制禁止无作用域的*；若必须用，要求注释说明理由并绑定容器类。
真正难的不是写对一行 *，而是当它藏在某个 node_modules 的 CSS 里、又恰好被 import 进来时，你能否第一时间意识到问题出在这里。
