通用选择器适用于全局样式重置，如统一盒模型、清除默认边距、设置全局字体和调试辅助，但因高匹配频率影响性能，阻碍浏览器优化，建议限制使用范围或明确列出元素以提升效率。
通用选择器（*）在CSS中用于匹配页面中的所有元素。虽然它使用简单，但在实际开发中需要谨慎对待，尤其要考虑其性能和维护性。
使用场景
通用选择器适用于一些全局样式重置或统一处理的场景：
-
盒子模型重置：通过
* { box-sizing: border-box; }统一所有元素的盒模型，避免因默认值不同导致布局问题。 - 去除默认边距：配合其他重置样式，快速清除浏览器默认的 margin 和 padding。
- 全局字体设置：为所有元素设定一致的字体族或字体平滑属性。
-
CSS调试辅助：临时添加边框或背景色，查看元素布局结构，例如
* { outline: 1px solid red; }。
性能影响
尽管通用选择器语法简洁，但它对渲染性能有一定负面影响：
- 高匹配频率：浏览器需将该规则应用于每一个DOM元素，包括嵌套很深的节点，增加样式计算时间。
- 阻碍优化机制：现代浏览器会跳过某些明显不匹配的选择器，但 * 无法被跳过，强制参与每轮匹配。
- 层叠优先级干扰：若后续规则权重不足，可能被 * 定义的样式覆盖，增加调试难度。
- 移动端更敏感：在性能较弱的设备上，大量应用通用样式可能导致页面响应变慢。
优化建议
为了兼顾功能与性能，可以采取以下替代或限制策略：
立即学习“前端免费学习笔记（深入）”；
- 用
html, body, div, span, ...
明确列出常用元素代替 * - 仅在必要的根层级作用域中使用，如
body *
限制范围 - 避免在关键动画或高频更新区域使用 * 触发重排重绘
- 借助CSS自定义属性减少重复声明，而不是依赖 * 设置大量样式
基本上就这些。通用选择器不是“坏”的，但应像使用全局变量一样小心。合理使用能提升开发效率，滥用则拖累性能。了解它的代价，才能更好掌控项目质量。
