CSS :is() 合并选择器并保持可读性的设计

CSS :is() 适合把重复前缀、同类组件或交互状态合并成一条可读规则，但不能把它视为逗号列表的无条件等价替换。它的特异性取参数列表中最高的一项；把 ID 与类放在一起，可能使原本能生效的主题覆盖失效。保持可读性的关键是同类分组、保留结构关系，并明确每组的特异性。

本文用一个构造的卡片重构场景复盘这个问题，不代表真实线上事故或浏览器实测。规范依据：https://www.w3.org/TR/selectors-4/；接口参考：https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:is。

症状：选择器缩短后，主题颜色覆盖失效

假设页面中的标题位于信息卡片内，同时处在 .theme 区域。重构前共享样式写成独立列表，主题规则放在后面。

/* 重构前：两个选择器各自参与匹配和特异性比较 */
.info-card .title,
#spotlight .title {
  color: #334155;
}

/* 同一来源、同一级联层的普通主题规则 */
.theme .title {
  color: #9a3412;
}

对不处于 #spotlight 内的信息卡片标题，前一个匹配分支是两个类，特异性为 (0,2,0)。主题规则也是 (0,2,0)，其他级联条件相同时，后写的主题颜色可以生效。现在将第一段改成下面这样，其余条件不变。

/* 重构后：参数列表混入了ID分支 */
:is(.info-card, #spotlight) .title {
  color: #334155;
}

/* 仅后移这一规则，不能消除特异性差异 */
.theme .title {
  color: #9a3412;
}

标题仍然能通过 .info-card 被选中，但共享规则现在具有 (1,1,0) 的特异性。问题发生在合并这一步：匹配范围看上去相近，覆盖竞争却变了。这里的颜色结论限定在相同来源、重要性与层等条件下，不把特异性当作整个级联唯一的判断依据。

根因是参数列表的最大特异性

:is() 自身不额外贡献一个普通伪类的计数，而是由参数中最具体的选择器替代其特异性。类分支是 (0,1,0)，ID分支是 (1,0,0)，因此该 :is() 取 (1,0,0)，再加外面的标题类得到 (1,1,0)。即使当前元素只匹配类分支，也采用这一规则。

我会把“哪个分支匹配”和“整个选择器多具体”分开记录。前者解释元素为什么被选中，后者解释它为何赢过另一条规则，混为一谈就容易出现“我又没有匹配那个 ID”的误判。

按同一职责合并选择器

若两个卡片是同等角色，给它们稳定的组件类，把 ID 留给独立需求。组件范围、卡片类型和交互状态分别保留一组，避免把所有条件塞进一个大括号。

/* 组件范围只写一次，同级卡片类型组成一组 */
.board :is(.info-card, .summary-card) > .title {
  margin-block: 0;
  color: #334155;
}

/* 状态分组只负责状态，不混入新的组件身份 */
.board :is(.info-card, .summary-card):is(:hover, :focus-within) > .title {
  color: #075985;
}

这条选择器表达的是：在 .board 组件范围内，找到信息卡片或摘要卡片的直接标题子元素。> 保留“直接子元素”关系，不能为了缩短代码改成空格，否则嵌套卡片的标题也可能纳入范围。状态分组中的 hover 与 focus-within 是任一满足；把两个 :is() 连写则表示同一个元素还要满足卡片类型条件。

对初次阅读者而言，换行和命名比减少字符更有价值。参数按同一角色排列，需要跨多个父子层级、例外条件太多时，保留独立规则更直观。若未来 .summary-card 需要不同布局，应拆出特有声明，而不是继续在共享选择器里增加例外。

默认样式适合 where，特殊规则可以保留列表

/* 让组件默认范围不贡献特异性，方便应用侧覆盖 */
:where(.info-card, .summary-card) > .title {
  color: #334155;
}

/* 相同级联条件下，主题类提供明确覆盖 */
.theme .title {
  color: #9a3412;
}

/* ID专属需求保持独立，不提高其他卡片的权重 */
#spotlight > .title {
  border-inline-start: 3px solid currentColor;
}

:where() 的参数不贡献特异性，但它仍然限制匹配范围；标题类仍贡献 (0,1,0)。因此不能把 where 理解成“忽略里面的条件”。库级默认样式可以选择这类低特异性范围，组件内部希望保留类级权重时则可以用 :is()。两者的取舍是覆盖契约，而不是单纯的语法偏好。

若目标是完整保留合并前各分支的不同权重，继续用逗号列表往往更准确。不要为了让后续规则获胜就直接加 !important；先弄清楚哪一层应该拥有这个样式。

后续修改要同时看匹配范围和覆盖契约

:is() 使用宽容的选择器列表，无效或不支持的参数分支可被丢弃，其他有效分支继续参与。但这不能为任意拼错语法兜底，更不能使一个完全不支持 :is() 的浏览器理解它。伪元素也不能放进参数列表；需要装饰卡片时，可把 ::before 等写在合法选择器的末尾，或保留独立规则。

• 新增参数先看是否出现 ID，是否意外抬高整组特异性。
• 保留组合符与状态所绑定的元素，避免更改匹配范围。
• 共享声明与组件特有声明分开，参数保持同类角色。
• 需要老浏览器支持时，依据项目支持矩阵保留明确的基础规则，不让不支持的选择器影响必要样式。

对构造案例，修复方向是移出 ID分支，或根据默认样式需求采用 where；结果应由项目的真实页面状态确认。文章中的静态结构图解释规则组成，不是开发者工具截图或测试回执。

常见问题

:is(.a, .b) 要同时有两个类吗？

不需要，任一分支匹配即可。要求同时具有两个类应写 .a.b。

合并后一定比逗号列表性能更好吗？

不能仅凭更短的写法给出性能结论。这里的目标是减少重复和明确覆盖关系，没有声称性能提升。

嵌套多个 :is() 是否越少越好？

应以职责和可读性判断。组件类型与状态可以分别成组；出现多层复杂例外时，拆分规则通常更容易维护。

为什么换成 where 以后覆盖更容易了？

它使参数分组贡献为零，降低了整个选择器的特异性；外部其余选择器和其他级联条件仍然有效。