现代CSS伪类不直接提升性能，不当使用（尤其:has()）反而拖慢渲染；真正提速在于替代低效写法以减少选择器数量、避免重复规则和冗余回溯。
现代 CSS 伪类（如 :is()、:where()、:has()）本身不直接“提升性能”，反而在不当使用时会显著拖慢渲染——尤其是 :has() 在复杂 DOM 中触发样式重计算。真正能提速的，是用它们**替代低效写法**，从而减少选择器数量、避免重复规则、抑制冗余匹配回溯。
为什么 :is() 和 :where() 能减小解析开销
传统写法中，为兼容不同祖先结构常堆砌多个选择器：
.card .title,
.article .title,
.section .title {
font-size: 1.25rem;
}
这会让浏览器执行三次独立匹配。而用 :is() 合并后：
:is(.card, .article, .section) .title {
font-size: 1.25rem;
}
浏览器只做一次“找所有 .title”动作，再检查其任意一个祖先是否命中括号内任一类名——匹配路径更短，且关键选择器（最右的 .title）不变，不增加回溯深度。
-
:where()与:is()行为一致，但权重为 0，适合覆盖第三方库样式时避免优先级冲突 - 两者都支持嵌套（如
:is(.btn, .link):hover），但不要嵌套太深，否则编译/阅读成本上升 - 不推荐用
:is(div, section, article) p这种带标签的选择器——仍需遍历所有p，且标签名无复用性，不如统一加类
:has() 是双刃剑：快写法，慢执行
:has() 允许“父元素根据子元素状态变化”，例如：
.list-item:has(.badge--new) {
padding-left: 32px;
}
它解决了过去必须 JS 添加 class 的问题，但代价是：浏览器必须对每个 .list-item 都检查其子树是否有 .badge--new ——这是 DOM 遍历，不是简单属性匹配。在含上百项的虚拟列表中，Recalculate Style 时间可能飙升。
- 仅在 DOM 结构浅（子元素 :has()
- 禁用场景：滚动容器内、动画帧内、或与
:hover组合（.item:has(.icon):hover会放大回溯量） - 构建时可用 PostCSS 插件自动检测并警告
:has()出现位置，避免误入核心交互区域
伪类组合中的性能陷阱
伪类叠加看似语义清晰，实则极易触发高成本匹配：
-
li:nth-child(2n+1):not(:first-child):has(> img)—— 四层条件叠加，浏览器需逐个li执行索引判断、边界检查、子树扫描，移动端实测比单类名慢 3 倍以上 -
:focus-visible:focus这类冗余组合毫无必要，:focus-visible已隐含聚焦态 - 慎用
:is()包裹通配选择器：:is(*)[data-id]等价于*[data-id]，仍要遍历全部节点 - Sass/Less 中避免
&:hover { @at-root #{&}:has(> .trigger) { ... } }—— 编译后生成带空格的选择器，回溯立即回归
最易被忽略的一点：伪类本身不缓存匹配结果。每次样式计算（比如滚动、resize、JS 触发 class 切换），:has() 和复杂 :is() 都会重新跑一遍逻辑。与其依赖它们“自动响应”，不如在数据层明确标记状态（如 .item--has-badge），把计算压力从渲染阶段转移到可控的数据更新阶段。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
