哈喽，大家好，欢迎来到哈希茶馆！在 CSS 的世界里，选择器是我们与 HTML 元素沟通的桥梁。今天，我们要聊聊一个既强大又备受争议的选择器——通用选择器 *。它究竟是性能杀手，还是在特定场景下的得力助手？让我们一探究竟。
什么是通用选择器 *？
通用选择器，用一个星号 * 表示，是 CSS 中最直接的选择器之一。它的作用正如其名，能够匹配页面上的任何一个元素。
举个例子：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>通用选择器示例</title>
<style>
/* 选中页面上所有元素 */
* {
color: blue;
/* 为了演示，实际项目中不建议这样全局修改所有元素的颜色 */
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<div>
<span>这是一个 span 元素。</span>
</div>
<button>一个按钮</button>
</body>
</html>
在上面的代码中，* { color: blue; } 会让页面上所有的元素，包括 <h1>、<p>、<div>、<span> 甚至 <body> 和 <html>（如果它们没有被其他更具体的规则覆盖的话）的文字都变成蓝色。
* 为何会引发性能担忧？
通用选择器的强大之处在于其“通用性”，但这也正是其性能隐患的根源。
浏览器在渲染页面时，需要解析 CSS 规则并将其应用到对应的 HTML 元素上。当浏览器遇到一个像 * 这样的规则时，它必须检查页面上的每一个元素，看是否需要应用这个规则。
想象一下，如果你的页面结构非常复杂，有成百上千甚至上万个元素，浏览器为 * 所定义的每一条样式去遍历所有这些元素，无疑会增加额外的计算负担。相比之下，像 ID 选择器 (#myElement) 或类选择器 (.myClass) 这样的特定选择器，浏览器可以更快地定位到目标元素。
虽然现代浏览器在 CSS 解析和渲染方面做了很多优化，对于简单的 * 使用，性能影响可能并不显著。但在大型、复杂的单页应用 (SPA) 或动态内容频繁变化的页面中，过度或不当使用全局的 * 选择器，仍然可能成为性能瓶颈之一，尤其是在性能较弱的设备上。
* 的合理用武之地
尽管存在性能方面的考量，通用选择器 * 并非一无是处。在某些特定场景下，它能提供极大的便利。
1. CSS Reset 与 box-sizing
最广为人知且被普遍接受的 * 用法之一，就是配合 box-sizing 属性进行 CSS Reset。
* {
box-sizing: border-box;
}
/* 也可以更精确一些，包含伪元素 */
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
box-sizing: border-box; 声明元素的 width 和 height 属性包含了 padding 和 border。这使得布局更加直观和可控。将它应用于所有元素（包括伪元素 ::before 和 ::after），可以确保整个项目在盒子模型计算上的一致性。这种用法通常放在 CSS 文件的最前面，其带来的便利性往往超过了微小的性能开销。
一些开发者也曾使用 * { margin: 0; padding: 0; } 来清除所有元素的默认内外边距。但这种做法比较“激进”，可能会清除掉一些表单元素等本身需要默认样式的元素，因此现在更推荐使用更精细化的 Reset CSS 方案（如 Normalize.css 或针对特定元素的重置）。
2. 调试辅助
在开发和调试阶段，* 可以临时用来高亮显示所有元素的轮廓，帮助我们理解布局和元素边界。
/* 临时调试样式 */
* {
outline: 1px solid red !important; /* 使用 !important 确保生效 */
}
注意：这绝对不应该用于生产环境！调试完毕后务必移除。
3. 作用域限制下的使用
当 * 与其他选择器结合，限制其作用范围时，性能影响会大大降低。
例如，只想选中某个特定 <div> 内的所有子孙元素：
<div class="my-container">
<h2>标题</h2>
<p>一些文本 <span>和内联元素</span>.</p>
<a>链接</a>
</div>
<p>容器外的段落。</p>
.my-container * {
/* 这个规则只会影响 .my-container 内部的元素 */
/* 例如，给内部所有元素添加一个细微的过渡效果 */
transition: all 0.3s ease;
}
在这个例子中，浏览器首先会找到 .my-container 元素，然后才在其内部应用 * 选择器。其影响范围被有效控制，性能开销远小于全局的 *。
类似的还有子代选择器 >：
article > * {
margin-bottom: 1em; /* 给 article 的所有直接子元素设置下边距 */
}
这条规则只会匹配 article 元素的直接子元素，而不是所有后代元素。
何时应避免使用 *？
1. 全局样式定义
尽量避免使用 * 来定义全局性的、非重置目的的样式。例如，* { font-family: 'Arial'; }。更好的做法是将其应用到 body 或 html 标签上，并利用继承特性。
body {
font-family: 'Arial', sans-serif;
color: #333;
line-height: 1.6;
}
2. 无限制的后代选择
即使在特定父元素下，如果层级很深且元素数量庞大，.parent * 这样的写法仍需谨慎。如果能明确指定子元素的标签名或类名，会是更优的选择。
总结
通用选择器 * 是一个简单直接的工具，它：
- 优点：能够选中所有元素，非常适合进行全局性的
box-sizing重置，或在调试时快速定位元素。 - 潜在缺点：无限制地使用可能对性能产生负面影响，尤其是在复杂页面上。
关键在于理解其工作原理和潜在成本，并明智地使用它。对于 box-sizing 这样的场景，* 是一个非常实用的选择。而在其他情况下，优先考虑更具体的选择器，将 * 的使用限制在必要的、可控的范围内，才能真正发挥其优势，避免不必要的性能开销。
希望这篇文章能帮助你更深入地理解 CSS 通用选择器 *！
如果你觉得这篇文章对你有帮助，欢迎点赞、推荐和分享给更多的小伙伴！我们下期再见！
🔥 关注我的公众号「哈希茶馆」一起交流更多开发技巧
