<p>会，但不是“一用就卡”，关键看使用方式、场景及DOM规模；通配符单独使用性能尚可，但组合低效选择器（如.nav * span）或滥用重绘属性会显著拖慢渲染。</p>
会，但不是“一用就卡”，关键看怎么用、在哪用、DOM 规模多大。
通配符选择器匹配过程本身不慢，但触发全树遍历很伤
浏览器匹配 * 时确实快——它不挑元素，直接扫一遍所有节点。问题出在组合使用时：比如 .container * 或 section *::before，浏览器必须对 .container 下每个子节点都检查是否匹配其后代路径，DOM 节点越多，开销越线性增长。
- 现代浏览器（Blink/WebKit）已优化单个
*的性能，单独写* { box-sizing: border-box; }几乎无感知 - 真正危险的是
* + div、nav * span这类“通配+后代+标签”组合，会迫使引擎做大量无效回溯 - DevTools 的
Rendering → Paint flashing能帮你确认：悬停后大面积闪烁，大概率不是选择器慢，而是它连带触发了重绘（比如* { opacity: 0.99; }）
常见误用场景：reset 和调试时没收住
很多人用 * 做 CSS reset 或临时调试，上线前却忘了删或没约束范围，结果让整个页面承担不必要的计算。
-
* { margin: 0; padding: 0; }看似简洁，但会重置input、button、select的原生边距，导致表单控件错位或点击热区异常 -
* { outline: 1px solid red !important; }调试完必须删掉，否则!important会干扰后续 focus 样式，且 outline 绘制成本高 - 更安全的 reset 写法是分组：
html, body, h1, h2, h3, p, ul, ol, li, form, fieldset, input, button, textarea, select { margin: 0; padding: 0; }
替代方案：用继承和变量代替暴力通配
真正需要“全局生效”的样式，优先走继承链或 CSS 自定义属性，而不是靠 * 强刷。
立即学习“前端免费学习笔记（深入）”；
-
html { box-sizing: border-box; }+*::before, *::after { box-sizing: inherit; }比* { box-sizing: border-box; }更精准，且避免伪元素重复计算 - 用
:root定义变量控制颜色、间距等，再通过body或布局容器 class 控制作用域，比如.theme-dark * { color: var(--text-light); }改成.theme-dark { color: var(--text-light); }，靠继承向下透传 - 工具类如
class="m-0 p-0"比*更可控，也方便按需加载（比如 Tailwind 的 `@layer base`）
通配符选择器最隐蔽的风险不在“用了”，而在“用了之后还不断叠加其他低效选择器”，比如 *:not(.skip) [data-id] > span:hover —— 这种写法会让浏览器在每次 hover 时重新跑完整匹配链。实际项目里，先查 DevTools 的 “Coverage” 面板看哪些 CSS 没被用到，比纠结单个 * 是否该删，更能定位真瓶颈。
