星号选择器（*）是css中的通用选择器，用于选中页面所有元素，常用于全局样式重置、统一盒模型（box-sizing: border-box）、设置基础字体和颜色等。它能消除浏览器默认样式差异，提升开发效率，是CSS Reset的核心工具。合理使用可简化布局计算，便于调试；但应避免滥用复杂样式，以防性能损耗和继承冲突。现代浏览器下其性能影响极小，主要适用于基础、通用的简单样式设定。
CSS中那个看起来不起眼的星号（
*
），其实是个非常强大的工具，它不是用来显示在页面上的符号，而是CSS里的一种选择器，我们称之为“通用选择器”。它的作用简单粗暴：选择页面上的所有元素。通常，我们用它来设定一些全局性的基础样式，比如统一的盒模型或者重置浏览器默认的内外边距，让我们的样式工作有个更干净的起点。
要用好这个星号选择器，核心在于理解它的“通用”性。它会触及你html文档里的每一个标签，从
html
到
body
，再到
div
、
p
、
span
，无一例外。这既是它的力量，也是我们使用时需要格外小心的原因。
最常见的用法，莫过于所谓的“CSS Reset”或者“Normalize”的起点。我们都知道，不同浏览器对html元素的默认样式处理方式不尽相同，比如
body
标签自带的
，或者
、
ol
列表的
。为了确保我们的设计在各种浏览器下表现一致，一个通用的重置就显得尤为必要。
/* 一个简单的全局重置 */ * { margin: 0; padding: 0; box-sizing: border-box; /* 个人非常推荐这个，让布局计算更直观 */ } /* 当然，更精细的重置会针对特定元素，但星号是起点 */
这里我特别想提一下
box-sizing: border-box;
。这真的是一个游戏规则改变者。默认的
content-box
模式下，元素的
width
和
height
只包含内容区，
padding
和
border
会额外增加元素的总尺寸。而
border-box
模式下，
width
和
height
则包含了
padding
和
border
，让我们的布局计算变得异常简单和直观。我个人在每个项目开始时都会加上这一行，它能省去很多不必要的尺寸计算烦恼。
立即学习“前端免费学习笔记（深入）”；
另一个应用场景是，当你需要给所有元素设置一个基础的字体样式，或者一个默认的文字颜色时。
/* 设置全局字体和颜色 */ * { font-family: 'Helvetica Neue', Arial, sans-serif; color: #333; line-height: 1.6; /* 让文字阅读起来更舒适 */ }
当然，你也可以把这些样式直接设置在
body
或
html
上，但星号选择器能确保连那些可能不继承父级样式的元素（比如某些表单元素）也能获得这些基础设定。不过，这也要看具体需求，有时候直接作用于
body
会更有效率。
什么时候应该使用CSS星号选择器？
这是一个很实际的问题。我的看法是，星号选择器最适合那些你希望“无差别”地应用到页面上所有元素的样式。
它在CSS Reset或Normalize中扮演核心角色。就像我前面提到的，为了消除浏览器之间的默认样式差异，我们通常会用它来清零
margin
和
padding
，或者统一
box-sizing
。这是一个新项目启动时，建立统一视觉基础的绝佳方式。没有它，你可能需要写一大堆选择器来挨个重置。
对于全局的盒模型设定，
box-sizing: border-box;
通过星号选择器来应用，几乎成了现代前端开发的标配。它简化了布局计算，减少了因为盒模型理解偏差导致的布局问题。
当你想快速调试或者进行实验性样式调整时，星号选择器也很有用。比如，你想看看所有元素都加上一个红色边框会是什么效果，或者临时改变所有文本的字体颜色，用
*
可以瞬间达到目的，而不需要写一堆具体的选择器。这在快速原型开发或排查布局问题时特别方便。
然而，我们也要警惕它的“滥用”。因为它选择所有元素，如果在这里应用了过多复杂的样式，可能会导致一些意想不到的继承问题，或者在后期被更具体的选择器覆盖时，造成样式冲突和调试的困难。所以，我的建议是，把星号选择器限制在那些真正需要全局统一、且优先级较低的基础样式上。
使用星号选择器对网页性能有什么影响？
谈到性能，很多人一听到“选择所有元素”就会下意识地觉得它很慢，这其实是个值得深思的议题。从理论上讲，是的，星号选择器（
*
）的效率确实不如那些更具体的选择器，比如ID选择器（
#id
）或类选择器（
）。浏览器在解析CSS时，会从右往左匹配选择器。当它看到
*
时，意味着它需要检查dom树上的每一个节点，看看是否需要应用样式。这确实增加了匹配的工作量。
在过去，当浏览器渲染引擎没那么强大，或者页面DOM结构极其复杂时，过度使用
*
可能会导致明显的性能瓶颈，尤其是在旧版ie浏览器上。但到了今天，现代浏览器的CSS解析和渲染能力已经有了质的飞跃。对于大多数中小型网站，或者即使是大型网站中合理地使用
*
（比如只用于全局重置那几行代码），其带来的性能影响几乎可以忽略不计。
举个例子，仅仅是
* { margin: 0; padding: 0; box-sizing: border-box; }
这几行代码，并不会让你的网站变得卡顿。真正拖慢性能的，往往是复杂的布局计算、大量的重绘和回流（reflow/repaint）、或者JavaScript的低效操作，而非几行简单的全局CSS。
但是，这不意味着我们可以毫无顾忌地在
*
里堆砌大量样式。如果你的
*
选择器里包含了复杂的阴影、渐变、动画或者需要大量计算的属性，并且这些样式又被页面上绝大多数元素继承或覆盖，那确实有可能增加渲染负担。
所以，我的个人建议是，谨慎且有目的地使用。将
*
用于那些你确实希望所有元素都具有的基础、通用且简单的样式，比如重置、盒模型。对于具体的、复杂的样式，还是应该使用更精确的类选择器、ID选择器或者元素选择器，这样不仅效率更高，也更有利于代码的维护和管理。不要因为理论上的微小性能差异而放弃
*
在提升开发效率上的巨大优势。
除了全局重置，星号选择器还有哪些创意用法？
虽然全局重置和
box-sizing
是星号选择器最广为人知的用途，但它还有一些不那么常见、但却非常巧妙的“创意”用法，有时候能解决一些特定场景下的痛点。
一个我个人觉得很有趣的用法是快速可视化布局边界。当你遇到复杂的布局问题，或者想快速检查所有元素的实际占据空间时，可以临时给所有元素添加一个边框。
/* 快速查看所有元素的边界，用于调试 */ * { outline: 1px solid rgba(255, 0, 0, 0.5) !important; /* 使用outline而不是border，避免影响布局 */ }
这里我用
outline
而不是
border
，是因为
outline
不会占用空间，也就不会影响元素的实际布局，这在调试时非常有用。
!important
是为了确保它能覆盖其他可能的边框样式，让你能清晰地看到边界。调试完后记得删除。
另一个例子是统一表单元素的默认外观。我们知道，不同浏览器对
、
、
textarea
等表单元素的默认样式差异很大。虽然更推荐使用更具体的选择器或者CSS库来处理，但在某些需要快速统一基础风格的场景下，
*
也能起到作用。
/* 统一部分表单元素的基础字体，但这通常不够精细 */ * { font-size: 16px; /* 防止移动端字体过小 */ -webkit-appearance: none; /* 尝试移除部分浏览器默认样式 */ -moz-appearance: none; appearance: none; }
当然，这只是一个起点，表单元素的样式化通常需要更细致的定制。但如果你只是想快速抹平一些最基本的差异，
*
可以作为一个粗略的开端。
还有一种情况，是临时性地修改所有元素的某个不常用的属性。比如，你可能想在某个演示模式下，让所有元素的
cursor
变成
，或者临时禁用所有元素的
user-select
（文本选择）。
/* 临时禁用所有元素的文本选择 */ * { user-select: none; -webkit-user-select: none; /* 兼容性考虑 */ -moz-user-select: none; -ms-user-select: none; }
这些用法虽然不常见，但它们都体现了星号选择器“无差别应用”的强大之处。它就像一把万能钥匙，在需要快速、全局地施加某种影响时，能提供一个直接且高效的解决方案。当然，和所有强大的工具一样，它的使用需要审慎，避免过度或不当的应用，以免引入不必要的复杂性或性能问题。
评论（已关闭）
评论已关闭