CSS :is 组合选择器时的 specificity 控制

我第一次用 :is() 重构一组卡片标题样式时，只看到了“少写重复选择器”的好处。后来普通 h2 怎么都覆盖不掉，我才发现参数里混进了一个 ID：:is() 自身不加权，但整条选择器会采用参数列表中最高的 specificity，而不是当前元素实际匹配分支的权重。

控制方法可以概括成一句话：把 :is() 当成“最高参数权重插槽”。组合前先看最重参数；只想缩短写法时让参数保持同一权重；想让限定条件不抬高权重时改用 :where()；真正需要强权重的例外单独写。

官方地址：https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:is

把 :is() 视为最高参数权重插槽

specificity 常写成 ID-CLASS-TYPE 三列。ID 选择器进入第一列，类、属性和伪类进入第二列，类型选择器与伪元素进入第三列。组合符只限定关系，不增加数值。

/* .card 是 0-1-0，参数最高项 #hero 是 1-0-0，总计 1-1-0。 */
.card :is(h2, .title, #hero) {
  color: rebeccapurple;
}

/* 即使当前节点通过 h2 分支匹配，整条规则仍按最高参数权重计算。 */
.card h2 {
  color: steelblue;
}

上面第二条规则是 0-1-1，第一条是 1-1-0。因此后写的 .card h2 也无法仅靠出现顺序覆盖第一条。W3C Selectors Level 4 明确规定，:is() 的 specificity 由参数列表里最具体的复杂选择器替代。

只组合权重接近的分支

对我来说，最省心的模式不是“所有分支都塞进一个 :is”，而是只组合语义相近、权重接近的选择器。标题元素可以一组，状态类可以一组，ID 例外保留独立规则。

/* 类型选择器保持同一权重，组合后仍容易被组件修饰类覆盖。 */
.card :is(h2, h3, h4) {
  margin-block: 0;
}

/* 状态类单独组合，避免与 ID 混在同一参数列表。 */
.card:is(.featured, .promoted) {
  border-color: gold;
}

这种写法仍保留 :is() 的主要价值：减少重复的祖先路径，并让分支列表更易读。代价是不能追求“只写一条规则”，但维护时几乎不需要反复计算意外的 ID 权重。

用 :where() 主动归零可覆盖部分

:where() 与 :is() 的匹配能力相近，但 specificity 恒为 0-0-0。如果参数只是限定组件内部允许出现的位置，而样式本身希望被调用方覆盖，:where() 更符合设计意图。

/* 路径负责缩小作用域，但不把 #app 的 ID 权重带进组件默认值。 */
:where(#app, .preview) .card-title {
  color: #334155;
}

/* 业务修饰类可以用普通类权重覆盖默认值。 */
.theme-dark .card-title {
  color: #f8fafc;
}

这里第一条只有 .card-title 的 0-1-0，第二条是 0-2-0。这比加入 !important 更可控，也比在调用方复制一串 ID 更容易长期维护。

拆分真正需要强权重的例外

有时 ID 分支确实代表一个不可与普通标题混用的例外。此时不要把它塞进公共 :is()，而是拆成一条显式规则，让高权重只作用于对应节点。

/* 普通标题保持低权重。 */
.card :is(h2, h3) {
  color: #0f172a;
}

/* 特殊节点单独表达，不污染普通 h2、h3 的覆盖成本。 */
.card #hero-title {
  color: #7c3aed;
}

这也是“模式与例外分离”的价值：公共模式可组合、可覆盖；例外的后果写在自己的规则里。把所有选择器压成一行虽然短，却会把最高权重传播给本不需要它的分支。

把覆盖顺序交给 cascade layer

specificity 不是层叠算法的第一步。浏览器会先比较来源、!important 与级联层，再在同一优先范围内比较 specificity。引入第三方样式时，可以先用 @layer 明确优先顺序，而不是不断抬高选择器权重。

/* 层顺序集中声明，后面的 overrides 层优先于前面的组件层。 */
@layer vendor, base, components, overrides;

@layer components {
  .card :is(h2, h3) {
    color: #0f172a;
  }
}

@layer overrides {
  .dashboard .card h2 {
    color: #0369a1;
  }
}

需要注意，级联层解决的是层之间的优先顺序，不会改变单个选择器自身的 specificity 计算。将第三方、基础、组件和覆盖样式分层，再在每层内部保持低而稳定的权重，通常比混用 ID 和 !important 更可靠。

反例与后果

• 把 ID、类、类型全部放进同一个 :is()：最高分支抬高所有匹配结果。
• 为了覆盖高权重规则继续复制 ID 或追加祖先：短期生效，长期形成权重竞赛。
• 直接加 !important：改变重要性层级，后续只能用另一条 important 继续竞争。
• 只比较 specificity 数字：可能忽略级联来源、层、作用域邻近度和出现顺序。
• 在 :is() 里放伪元素：规范不允许通过 :is() 匹配伪元素，应将伪元素规则分开写。

判断清单

• 参数列表是否混入了 ID 或明显更重的复杂选择器？
• 这个分组只是为了缩短写法，还是确实希望提高权重？
• 希望调用方轻松覆盖时，是否应改用 :where()？
• 高权重分支能否拆成独立规则？
• 覆盖冲突是否其实来自 cascade layer 或 !important？

常见问题

:is() 本身算一个伪类权重吗？

不算。它自身不增加 0-1-0；该位置由参数列表中最高 specificity 替代。

:is(.a, #b) 匹配 .a 时也按 ID 权重吗？

是。当前规范采用列表中最高参数权重，不取当前实际匹配分支的权重。

:where() 会改变匹配范围吗？

在同样参数下，它与 :is() 都能表达“匹配任一分支”，主要区别是 :where() 的 specificity 恒为零。