CSS:is与:where在生产项目中有什么区别

:is() 和 :where() 权重机制本质不同：:is() 取括号内最高 specificity，:where() 恒为 0-0-0；误用会导致样式静默失效或意外覆盖，且均不支持伪元素、孤立伪类及语法错误。

:is() 和 :where() 在生产项目中根本不是“换汤不换药”的语法糖——它们的权重行为截然不同，选错一个，样式就可能被静默忽略，或意外覆盖第三方组件。

为什么 :is() 会突然压不过 .btn:hover？

因为 :is() 的权重取括号内最高 specificity 的选择器，不是平均值，也不是固定值。比如：:is(.btn, #header) a 的权重等同于 #header a（1-0-0），而 :is(.btn, .primary, .secondary) 的权重只是 0-0-1（和单个 .btn 一样）。

1. 常见错误现象：写 :is(.btn, .btn-lg, .btn-sm):hover 本意是统一 hover 样式，但若其中混入 ID 或属性选择器（如 :is(.btn, [data-role="submit"])），整条规则权重飙升，可能破坏原有层叠顺序
2. 真正有用的写法是类型混合：:is(button, input[type="submit"], .submit-btn):hover，既覆盖语义元素又兜底自定义类，且权重可控
3. Safari ≤15.3 会直接丢弃整条 :is() 规则（不报错、不警告），必须用 @supports selector(:is(*)) 包裹降级

为什么 :where() 写了却完全没生效？

:where() 的权重恒为 0-0-0，哪怕里面塞了 #nav ul li a:hover，它也只靠外部选择器“借权”。比如 nav :where(a, button) 能生效，靠的是 nav 提供的元素权重；但单独写 :where(a, button) { color: red; }，连一个 div.link 都压不过。

1. 典型误用：拿 :where() 当“安全版 :is()”来覆盖样式——它根本不参与层叠竞争，加 !important 也没用
2. 正确场景只有一种：你需要“写样式但不抢权”，比如设计系统重置：:where(*) { margin: 0; } 或 Vue scoped style 中穿透：:where(.el-button) { padding: 8px; }
3. Safari 15.0–15.3 存在解析 bug，可能跳过整条规则；Chrome 105+/Firefox 103+ 稳定，但上线前必须实机验证

:is() 和 :where() 都不支持哪些写法？

两者都只做静态匹配，不支持运行时逻辑，语法稍有偏差就会导致整条规则被浏览器丢弃（控制台常无明确报错）。

1. 禁止伪元素：:is(.a::before)、:where(.b::after) 直接非法
2. 禁止孤立伪类：:is(:hover)、:where(:focus) 不合法；但 :is(button:hover) 是合法的
3. 禁止空格/逗号错误：:is(.a, .b, )（末尾多余逗号）或 :is(.a,.b)（缺空格）在部分浏览器中会静默失效
4. 不支持嵌套伪类：:is(:where(.x)) 无效；:not(:is(.y)) 合法，但需注意权重继承逻辑

构建时要不要转译？

PostCSS 插件（如 postcss-is-pseudo-class）能把 :is() 转成逗号分组，但要注意：:where() 无法真正 polyfill——零权重行为 runtime 无法模拟，转译后反而可能因权重升高引发覆盖问题。

1. 推荐策略：现代浏览器用原生，老版本靠 class 回退。例如先写 .card-header, .card-body { padding: 1rem; }，再叠加 :is(.card-header, .card-body) { padding: 1.25rem; }
2. 不要用 JS 动态加 class 模拟 :is()——DOM 遍历开销大，且对动态插入的节点无效
3. 真要兼容 IE 或旧 Edge？放弃这两个伪类，老老实实用传统分组 + 手动统一权重

实际项目里最常踩的坑，不是不会写，而是没意识到 :where() 根本不打算“生效”，它存在的唯一意义是“不干扰”。需要覆盖时，:is() 才是工具；需要兜底时，:where() 才是解药——混淆这两者，比写错一个 class 名更容易让样式失控。