概述
:is() 和 :where() 最大的实用价值在于配合两者的特异性差异，构建"底座样式可被轻松覆盖"的组件体系。
| 伪类 | 特异性 | 适合谁用 |
|---|---|---|
:where() | 始终为 0 | 组件作者 — 底座样式不怕被外部覆盖 |
:is() | 取参数中最高 | 外部使用者 — 批量覆盖组件样式 |
案例一：:is() 简化多选择器
:is() 避免重复书写相同选择器，让 hover、focus 等状态管理更简洁。
不用 :is() 需要重复写：.isw-card:hover, .isw-card:focus-visible 等一系列选择器。
案例二：组件用 :where()，外部轻松覆盖
组件作者用
:where()定义默认样式（特异性 0）→ 外部用普通类就能覆盖。
下方两个按钮，左侧用常规选择器定义内部样式，右侧用 :where()。外部尝试用 .outer-theme 覆盖，结果截然不同：
| 选择器 | 特异性 | 结果 |
|---|---|---|
.btn .icon（组件，无 :where()） | 0,0,1,1 | 高 → 外部 .outer-theme .icon（0,0,2,0）能覆盖吗？能，但需写两层 |
.where-btn :where(.icon)（组件，有 :where()） | 0,0,1,0 | 低 → 外部 .outer-theme .icon（0,0,2,0）轻松覆盖 |
.outer-theme .icon（外部覆盖） | 0,0,2,0 | 始终高于 :where() 底座 |
组件最佳实践：内部元素样式用
:where()包裹 → 外部使用者仅需一个类即可定制，无需!important。
案例三：外部用 :is() 批量覆盖组件
外部使用者可以借助 :is() 一次覆盖多个组件类型，结合 :where() 底座，覆盖极其轻量。
不用 :is() 需要重复写三条：.dark-is .where-btn { ... } .dark-is .where-badge { ... } .dark-is .where-tag { ... }。
总结
:where() | :is() | |
|---|---|---|
| 特异性 | 始终为 0 | 取参数中最高 |
| 谁用 | 组件作者 — 定义底座样式 | 外部使用者 — 批量覆盖 |
| 效果 | 外部一个类就能覆盖，无需 !important | 减少重复，一条规则覆盖多目标 |
核心思想：组件用 :where() 写底座，外部用 :is() 或普通类覆盖 — 两者配合，样式定制变得极其轻量。