CSS伪类选择器性能不差，关键在使用方式；需谨慎使用:nth-child()、:nth-of-type()（大数据量动态操作时）、复杂嵌套:not()及向上查找的:has()；建议优先用类名替代、避免布局依赖动画、长列表用事件委托，并借助DevTools检测重绘。
CSS伪类选择器本身性能并不差，关键在于使用方式和浏览器渲染机制。现代浏览器对常见伪类（如 :hover、:focus、:nth-child()）做了高度优化，只要不滥用或嵌套过深，基本不会引发性能问题。
哪些伪类要谨慎使用？
部分伪类在特定场景下可能触发重排或频繁重绘：
-
:nth-child(n)和:nth-of-type(n)在元素数量极大（如上千个同级节点）且动态增删时，可能影响布局计算效率 -
:not()嵌套复杂选择器（如:not(div > p:last-child)）会增加匹配开销，尤其在深层DOM中 -
:has()是目前最需留意的——它需要向上查找父元素，可能引发整棵子树重新计算，Chrome 105+ 虽已支持，但应避免在高频交互区域或长列表中使用
提升伪类性能的实用建议
不需要牺牲语义和可维护性，只需注意几个细节：
- 优先用类名替代复杂伪类逻辑，比如用
.is-active代替:nth-child(3n+1):hover - 避免在
@keyframes或动画属性中使用依赖布局的伪类（如:checked ~ .panel触发动画） - 对长列表做虚拟滚动时，不要给每个项绑定
:hover样式，改用事件委托 + class 切换更稳妥 - 用 DevTools 的“Rendering”面板开启“Paint flashing”，直观观察伪类是否引发意外重绘
浏览器差异与兼容性提醒
性能表现也和浏览器实现有关：
立即学习“前端免费学习笔记（深入）”；
- Chrome 和 Safari 对
:hover和:focus做了惰性监听，只在用户交互时激活，很轻量 - Firefox 在旧版本中对
:nth-child()的解析略慢，但 Firefox 90+ 已基本追平 -
:is()和:where()虽简化写法，但:is()仍参与特异性计算，过度嵌套会影响样式层叠效率
合理使用伪类不仅安全，还能让代码更简洁、语义更强。真正拖慢页面的，往往是未节流的 JavaScript 监听、强制同步布局，或者不加限制的 CSS 动画——而不是一个 :valid 或 :disabled。
