当CSS选择器开始"减肥"

你是否也曾面对这样的CSS代码发愁？

header p:hover,
main p:hover,
footer p:hover {
  color: red;
  cursor: pointer;
}

这还只是3个选择器的情况。如果遇到20个同类选择器，代码会膨胀到让人崩溃。2025年的前端开发者已经找到了解决方案——:is()和:where()这对"瘦身教练"，能让你的CSS选择器瞬间甩掉赘肉。

:is()：CSS选择器的"排列组合大师"

:is()伪类就像CSS界的魔方高手，能把混乱的选择器列表整理得井井有条。它接受选择器列表作为参数，匹配列表中任意一个选择器能选中的元素。

最经典的案例是多层嵌套列表的样式优化。过去要写24行选择器才能实现的效果：

ol ol ul, ol ul ul, ol menu ul, ol dir ul,
ol ol menu, ol ul menu, ol menu menu, ol dir menu,
/* ...此处省略16个选择器... */
dir ol dir, dir ul dir, dir menu dir, dir dir dir {
  list-style-type: square;
}

现在用:is()只需一行：

:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) :is(ul, menu, dir) {
  list-style-type: square;
}

这种"选择器套娃"技巧在处理复杂组件库时尤其有用。比如同时选中卡片、弹窗、抽屉中的标题元素：

:is(.card, .modal, .drawer) :is(h1, h2, h3) {
  margin-bottom: 1rem;
}

:where()：优先级归零的"和平使者"

如果说:is()是选择器的"强化剂"，那:where()就是"降压药"。它和:is()语法完全相同，但有个杀手锏——优先级永远为0。

想象这个场景：你写了一个通用样式，却被第三方库的高优先级选择器覆盖。用:where()就能轻松解决：

/* 优先级为0，任何自定义样式都能覆盖 */
:where(.btn) {
  padding: 0.5rem 1rem;
}

/* 普通类选择器优先级更高，会覆盖上面的样式 */
.btn-primary {
  padding: 0.6rem 1.2rem;
}

这个特性让:where()成为CSS重置的理想选择。2025年主流组件库如Ant Design都在用它避免"特异性战争"，不过要注意旧浏览器兼容问题——360极速浏览器就曾因不支持:where()导致样式失效，解决方案是用StyleProvider移除该伪类：

2025年的最佳实践

现在这两个伪类已获得95%以上浏览器支持，但使用时仍需记住：

• 用:is() 处理同类元素分组，如导航和页脚的链接样式
• 用:where() 写基础样式或需要被覆盖的通用规则
• 避免嵌套过深，三层以上嵌套会降低可读性
• 配合PostCSS 自动添加前缀，兼容旧版浏览器

试试把你的CSS选择器"瘦个身"吧——毕竟，少写的每一行代码，都是给未来的自己减负。