* 通配符选择器匹配所有元素但不匹配伪元素和 shadow DOM 内部；不推荐用于全局重置因性能差、破坏语义样式、干扰继承且无法重置部分 UA 样式。
什么是 * 通配符选择器
* 是 CSS 中最宽泛的选择器，它匹配文档中所有元素（包括 html、body、div、p、span，甚至注释节点以外的任何标签）。但它不匹配伪元素（如 ::before）或文档根以外的上下文（比如 shadow DOM 内部需单独作用）。
为什么 * { margin: 0; padding: 0; } 不推荐作为重置方案
这种写法看似“一劳永逸”，实际会带来明显副作用：
- 性能开销大：浏览器需为每个元素计算并应用该规则，尤其在大型 DOM 中拖慢渲染
- 破坏原生语义样式：表单控件（
input、button）、h1～h6、ul等自带默认间距和缩进，粗暴清空后反而增加后续样式修复成本 - 干扰继承逻辑：
*的权重虽低（0,0,0,0），但与更具体的选择器叠加时可能引发意外覆盖 - 无法重置某些 UA 样式：比如
textarea的resize、img的垂直对齐方式，这些不会被margin/padding影响
真正安全高效的全局初始化替代方案
现代项目应避免依赖 * 重置，改用更精准、可维护的方式：
- 用
all: unset;重置特定容器内所有继承属性（注意：它不重置display、direction等非继承属性） - 针对常用元素显式归零：
body, h1, h2, p, ul, ol, li, pre, blockquote { margin: 0; padding: 0; } - 使用标准化库（如
normalize.css）——它保留有用默认样式，仅修正跨浏览器差异 - 若必须用通配符，限制作用域：
.reset-layout * { box-sizing: border-box; }，这样只影响特定区域，且只设一个高性价比属性
哪些场景下 * 确实有用
它并非完全无用，只是不能滥用。典型合理用例包括：
立即学习“前端免费学习笔记（深入）”；
- 统一盒模型：
* { box-sizing: border-box; }—— 这是目前最被广泛接受的*用法，兼容性好，副作用极小 - 调试时高亮所有元素：
* { outline: 1px solid red !important; }（仅开发阶段，切勿上线） - 在 Shadow DOM 根节点内做初始隔离：
:host * { margin: 0; }（需配合:host使用，避免污染外部） - 配合属性选择器做弱约束：
*[data-legacy] { font-size: 14px; }，比写一堆标签名更灵活
记住：* 的威力在于“广度”，代价是“失控”。只要涉及布局、尺寸、颜色等视觉属性，就该收窄范围；只有 box-sizing 这类底层、无外观副作用的属性，才值得交给它批量处理。
