CSS :is () 与 :where ()：简化复杂选择器的 “语法糖”

在 CSS 编写中，你是否遇到过这样的场景：需要给多个不同父元素下的子元素设置相同样式，结果写出一长串重复的选择器？比如给header、main、footer中的p标签设置相同的颜色，传统写法可能是header p, main p, footer p { color: #333; }。这样的代码不仅冗长，还容易出错。而 CSS 新增的:is()和:where()伪类，就像两把 "简化神器"，能将复杂的选择器合并成简洁的形式，让代码更易读、易维护。今天，我们就来解锁这两个提升 CSS 效率的 "语法糖"。

一、认识 :is () 与 :where ()：选择器的 "合并工具"

:is()和:where()都是 CSS Selectors Level 4 规范中引入的伪类，它们的核心功能相同：接收一个选择器列表作为参数，匹配列表中任意一个选择器能匹配的元素。简单说，就是将多个选择器 "合并" 成一个，避免重复书写。

1.1 基础语法：化繁为简的选择逻辑

css 复制代码

/* 传统写法：多个选择器重复部分 */
header h1,
header h2,
header h3 {
  color: #222;
}

/* :is() 简化写法 */
header :is(h1, h2, h3) {
  color: #222;
}

/* :where() 简化写法 */
header :where(h1, h2, h3) {
  color: #222;
}

可以看到，:is(h1, h2, h3)等价于h1, h2, h3，但与前面的header结合后，代码从三行精简为一行，且避免了重复书写header。

1.2 解决的核心问题：减少选择器冗余

在复杂布局中，选择器可能包含多层嵌套，此时:is()和:where()的优势更加明显：

css 复制代码

/* 传统写法：冗长且重复 */
section .title,
article .title,
aside .title,
nav .title {
  font-weight: bold;
  margin-bottom: 1rem;
}

/* 简化写法：用 :is() 合并父元素 */
:is(section, article, aside, nav) .title {
  font-weight: bold;
  margin-bottom: 1rem;
}

这种简化不仅让代码更短，还降低了修改成本 ------ 如果需要添加或移除一个父元素（如footer），只需在:is()的参数中操作一次，无需修改多个选择器。

二、:is () 与 :where () 的核心区别：优先级不同

:is()和:where()的功能几乎完全相同，但有一个关键区别：优先级计算方式不同。

:is()：它的优先级等于参数列表中优先级最高的选择器的优先级。
:where()：它的优先级始终为0（最低优先级），不会影响整体选择器的优先级。

2.1 优先级对比示例

css 复制代码

/* 基础样式 */
.text {
  color: black;
}

/* :where() 选择器：优先级 0 */
:where(.container) .text {
  color: blue;
}

/* :is() 选择器：优先级由 .container 决定（10） */
:is(.container) .text {
  color: red;
}

html 复制代码

<div class="container">
  <p class="text">这段文字是什么颜色？</p>
</div>

结果：文字最终为红色。原因是：

:where(.container) .text的优先级是0 + 10（.text的优先级）= 10。
:is(.container) .text的优先级是10（.container的优先级） + 10（.text的优先级）= 20，高于前者。
因此:is()的样式会覆盖:where()的样式。

2.2 优先级应用场景

需要保持低优先级时，用 :where()：比如通用组件库的样式，希望用户能轻松覆盖。
需要继承高优先级时，用 :is()：比如项目中的特定样式，不希望被轻易覆盖。

css 复制代码

/* 组件库样式：用 :where() 确保低优先级，方便用户覆盖 */
:where(.btn) {
  padding: 0.5rem 1rem;
  border: none;
}

/* 项目样式：用 .btn 即可覆盖（优先级 10 > 0） */
.btn {
  padding: 0.6rem 1.2rem;
}

三、进阶用法：嵌套与复杂选择器处理

:is()和:where()支持嵌套，还能处理包含组合选择器（如后代、子元素、相邻兄弟等）的场景，进一步简化代码。

3.1 嵌套使用：多层选择器合并

css 复制代码

/* 传统写法：多层嵌套的重复选择器 */
header nav ul li a,
header nav ul li span,
footer nav ul li a,
footer nav ul li span {
  color: #666;
}

/* 简化写法：嵌套 :is() */
:is(header, footer) nav ul li :is(a, span) {
  color: #666;
}

3.2 处理组合选择器：后代、子元素、伪类等

css 复制代码

/* 传统写法：多个伪类选择器 */
.card:hover .title,
.card:focus-within .title,
.card:active .title {
  transform: scale(1.05);
}

/* 简化写法：用 :is() 合并伪类 */
.card:is(:hover, :focus-within, :active) .title {
  transform: scale(1.05);
}

3.3 配合否定伪类 :not () 使用

:is()和:where()可以与:not()结合，实现更灵活的排除逻辑：

css 复制代码

/* 选择除了 h1、h2 之外的标题元素 */
:is(h1, h2, h3, h4, h5, h6):not(:is(h1, h2)) {
  font-size: 1.2rem;
}

/* 等价于 */
h3,
h4,
h5,
h6 {
  font-size: 1.2rem;
}

四、实战案例：让 CSS 代码更简洁

4.1 响应式布局：简化媒体查询中的选择器

在响应式布局中，不同断点下可能需要给多个元素设置相同样式，:is()可以减少重复：

css 复制代码

/* 传统写法：断点中重复的选择器 */
@media (max-width: 768px) {
  header .logo,
  header .nav,
  footer .logo,
  footer .nav {
    flex-direction: column;
  }
}

/* 简化写法：用 :is() 合并 */
@media (max-width: 768px) {
  :is(header, footer) :is(.logo, .nav) {
    flex-direction: column;
  }
}

4.2 通用样式重置：用 :where () 降低优先级

在样式重置（Reset CSS）中，使用:where()可以确保重置样式的优先级最低，方便后续覆盖：

css 复制代码

/* 传统重置：优先级可能过高，难以覆盖 */
ul,
ol,
menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 用 :where() 重置：优先级 0，易覆盖 */
:where(ul, ol, menu) {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 后续样式可以轻松覆盖（优先级 10 > 0） */
.custom-list {
  margin: 1rem 0;
  list-style: disc;
}

4.3 组件样式：用 :is () 统一处理多种状态

在组件设计中，一个组件可能有多种状态（如默认、禁用、加载中），:is()可以合并这些状态的选择器：

css 复制代码

/* 按钮组件的多种状态样式 */
.btn:is(:disabled, .loading) {
  opacity: 0.7;
  cursor: not-allowed;
  pointer-events: none;
}

/* 等价于 */
.btn:disabled,
.btn.loading {
  opacity: 0.7;
  cursor: not-allowed;
  pointer-events: none;
}

五、避坑指南：使用时的注意事项

5.1 浏览器兼容性

:is()和:where()兼容所有现代浏览器（Chrome 88+、Firefox 78+、Safari 14+、Edge 88+），但需要注意：

早期浏览器可能需要带前缀的版本（如:-webkit-any()和:-moz-any()），但现在已基本淘汰。
IE 完全不支持，如需兼容 IE，需避免使用或通过 PostCSS 等工具转译。

5.2 避免选择器范围过大

:is()和:where()会匹配参数列表中的所有选择器，若范围过大可能导致意外匹配：

css 复制代码

/* 问题：会匹配所有 div 中的 p，包括嵌套在其他元素中的 div */
:is(div) p {
  color: red;
}

/* 优化：明确父元素范围 */
.container:is(div) p {
  color: red;
}

5.3 注意优先级陷阱

:is()的优先级由参数中优先级最高的选择器决定，可能导致样式覆盖不符合预期：

css 复制代码

/* :is() 的优先级由 #id 决定（100） */
:is(.class, #id) p {
  color: blue;
}

/* 这个选择器的优先级是 10（.class）+ 10（p）= 20，会被上面覆盖 */
.class p {
  color: red;
}

解决方法：了解:is()的优先级计算规则，必要时用更具体的选择器覆盖。

六、总结

:is()和:where()作为 CSS 中的 "语法糖"，虽然没有引入新的功能，但显著提升了代码的简洁性和可维护性。它们的核心价值在于：

简化代码：将重复的选择器合并，减少冗余，让 CSS 更易读。
降低维护成本：修改选择器时只需操作一次，避免遗漏。
灵活控制优先级 ：:where()的低优先级适合通用样式，:is()的动态优先级适合特定样式。

在实际开发中，建议：

写通用组件库或样式重置时，优先用:where()，方便用户覆盖。
写项目特定样式时，根据优先级需求选择:is()或:where()。
处理多层嵌套或多状态选择器时，用它们合并重复部分，提升代码质量。

如果你还在为冗长的 CSS 选择器烦恼，不妨试试:is()和:where()------ 这两个小小的 "语法糖"，可能会让你的 CSS 代码变得清爽许多。

你在项目中用过:is()或:where()吗？欢迎在评论区分享你的使用心得～