:is()取括号内最高权重子选择器参与特异性计算，如:is(.btn, #header, [data-id])权重为1-0-0；:where()恒为0-0-0，不参与层叠竞争，仅用于零干扰样式重置。
:is() 的权重取决于括号内最高 specificity 的选择器
写 :is(.btn, #header, [data-id])，整条规则的权重不是平均或相加，而是取 #header 的 ID 权重（1-0-0）。这意味着它可能意外覆盖你原本没打算动的高权重要求，比如第三方组件里的 .ant-btn。
常见错误现象：:is(.a, .b, .c) 和单独写 .a 权重一样，毫无提权意义；真正有用的是混用类型，比如 :is(button, [type="submit"], .submit-btn)，让权重由其中最强的那个决定。
注意以下几点：
-
:is()不支持伪元素（如.a::before）和非法伪类（如单独写:hover） - 括号内任意一个选择器语法错误（比如多了一个逗号、写了
:is(.a, )），整条 CSS 规则会被浏览器直接丢弃，控制台可能只报模糊警告 - Safari 15.4 之前不支持嵌套
:is(:is())，会静默失效
:where() 的权重恒为 0-0-0，不参与层叠竞争
:where() 的核心价值不是“简化写法”，而是“不抢权重”。它内部所有选择器——哪怕塞进 #nav .item:hover——最终整个伪类的权重仍是 0-0-0。所以 .card :where(.title, .subtitle) 的权重只算 .card 那部分（0-1-0），括号里不加码。
典型误用场景：以为 :where() 是“更安全的 :is()”，结果发现样式压根不生效。其实是因为它权重为 0，连一个普通的 div 标签选择器都压不过。
必须确保它能起效的条件：
- 外部必须有足够权重的选择器提供支撑，例如
nav :where(a, button)靠nav提供元素权重 - 不能写
:where(a:hover)—— 伪类本身合法，但旧 Safari 可能直接忽略整条规则 -
!important对它无效：权重为 0 的声明加!important，仍会被任何非 0 权重规则覆盖
兼容性与降级必须手动处理，不能靠 polyfill 自动兜底
Chrome 105+、Firefox 103+、Safari 15.4+ 稳定支持两者，但 Edge 17 及更早、所有 IE 版本完全不支持。PostCSS 插件（如 postcss-preset-env）对 :where() 的降级更保守，部分版本会直接剔除而非模拟。
安全做法是用 @supports 显式检测：
@supports selector(:where(*)) {
:where(button, input[type="button"]) { cursor: default; }
}
@supports not selector(:where(*)) {
button, input[type="button"] { cursor: default; }
}
别在关键路径上全量替换旧写法——比如把所有逗号分组立刻换成 :where()，尤其在 CMS 或嵌入式环境中，容易因环境不支持导致整块样式丢失。
什么时候该换函数名，而不是改逻辑
:is() 和 :where() 语法完全一致，替换只需改函数名。但行为天差地别：前者是「我有意提权」，后者是「我主动弃权」。
所以判断依据很直接：
- 想统一增强已有样式的交互态（如 hover/focus），且不介意权重提升 → 用
:is() - 想给第三方组件加兜底样式、做 CSS Reset、或在 scoped style 中穿透又不污染权重 → 必须用
:where() - 发现样式被意外覆盖或完全不生效，第一反应不是调顺序或加
!important，而是查括号内有没有 ID、有没有语法错误、目标环境是否支持
最易被忽略的一点：二者都不支持动态值，也不能嵌套另一个 :is() 或 :where()；它们是纯静态匹配机制，和 JS 变量、模板字符串无关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
