浏览器从右向左匹配，右侧选择器越泛（如a、div）导致初始查找集越大，匹配越慢；高效做法是让右侧足够窄（如#nav .link），减少回溯；深层嵌套加剧匹配路径爆炸，伪类如:nth-child叠加后更差；类名高效与否取决于其在dom中是否稀疏唯一，而非单纯命名；:is()/:where()不提速但可避免权重陷阱，间接提升性能。
浏览器从右向左匹配，越具体的右边越慢
关键不是“具体”本身慢，而是具体带来的右侧匹配基数变大。比如 .container ul li a，浏览器先找所有 a 标签——哪怕页面有 2000 个链接，它就得逐个向上检查父级是否满足 li → ul → .container。这个过程无法跳过任何 a，所以右边越泛（如 a、div、*），初始查找集越大，耗时越长。
真正高效的是右边足够窄的选择器，例如：#nav .link 中的 .link 比 a 窄得多；.btn-primary 直接命中目标元素，无需回溯。
深层嵌套不是语义问题，是匹配路径爆炸
写 section > article > header > h1 看似结构清晰，但浏览器要为每个 h1 验证：父是 header？祖父是 article？曾祖父是 section？每层都可能失败，且失败前已付出计算成本。尤其当 DOM 节点数多、层级深时，这种线性验证开销会明显上升。
- 嵌套每增加一层，平均匹配时间非线性增长（实测在万级节点下，4 层比 2 层慢 3–5 倍）
-
:nth-child(2n)这类伪类会让浏览器遍历全部兄弟节点，和嵌套叠加后更糟 - Sass 编译出的
.card .card__title .card__title--large实际等价于三层后代选择器，不是“命名好就安全”
类选择器快，但前提是它真能缩小右侧范围
用类名不等于自动高效。如果类名太泛（比如 .item 在商品列表里出现 500 次），或被滥用为“占位符”（.wrapper .content .text），那它和 div div p 的性能差异微乎其微。
真正起作用的是：类名是否唯一指向一类视觉/功能单元，且在 DOM 中分布稀疏。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- ✅ 推荐：
.search-input（全站最多 1–2 处）、.pricing-card__price（BEM 风格，局部唯一） - ❌ 危险：
.box、.content、.inner—— 这些在 DevTools 的 Elements 面板里一搜几百个，就是性能隐患 - 工具验证：Chrome DevTools → Coverage 标签页可看哪些类名实际未被使用，
PurgeCSS能清掉它们，但前提是代码里别先写一堆泛类
:is() 和 :where() 不提速，但能绕过权重陷阱
:is() 和 :where() 本身不减少匹配计算量，浏览器仍需展开并逐个验证内部选择器。但它们的价值在于：避免重复写同样结构来提升权重。
比如想让 button 和 a.btn 共享样式，不用写两遍：
.primary-button { … }
a.btn.primary { … }
而改用：
:where(button, a.btn).primary { … }
这样既保持规则简洁，又因 :where() 权重为 0，不会干扰其他规则的覆盖逻辑——这间接减少了为“压过别人”而写的更复杂选择器（如 body .nav ul li a.active），从而避开真正的性能雷区。
真正容易被忽略的点是：性能瓶颈往往不在单条规则，而在成百上千条规则共同触发的重排重绘。选择器再快，如果写了 2000 行冗余 CSS，或靠 !important 和深层嵌套强行覆盖，最终拖慢的仍是整块渲染流水线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
