: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 一样）。
- 常见错误现象：写
:is(.btn, .btn-lg, .btn-sm):hover本意是统一 hover 样式，但若其中混入 ID 或属性选择器（如:is(.btn, [data-role="submit"])），整条规则权重飙升，可能破坏原有层叠顺序 - 真正有用的写法是类型混合：
:is(button, input[type="submit"], .submit-btn):hover，既覆盖语义元素又兜底自定义类，且权重可控 - 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 都压不过。
- 典型误用：拿
:where()当“安全版:is()”来覆盖样式——它根本不参与层叠竞争，加!important也没用 - 正确场景只有一种：你需要“写样式但不抢权”，比如设计系统重置：
:where(*) { margin: 0; }或 Vue scoped style 中穿透：:where(.el-button) { padding: 8px; } - Safari 15.0–15.3 存在解析 bug，可能跳过整条规则；Chrome 105+/Firefox 103+ 稳定，但上线前必须实机验证
:is() 和 :where() 都不支持哪些写法？
两者都只做静态匹配，不支持运行时逻辑，语法稍有偏差就会导致整条规则被浏览器丢弃（控制台常无明确报错）。
- 禁止伪元素：
:is(.a::before)、:where(.b::after)直接非法 - 禁止孤立伪类：
:is(:hover)、:where(:focus)不合法；但:is(button:hover)是合法的 - 禁止空格/逗号错误：
:is(.a, .b, )（末尾多余逗号）或:is(.a,.b)（缺空格）在部分浏览器中会静默失效 - 不支持嵌套伪类：
:is(:where(.x))无效；:not(:is(.y))合法，但需注意权重继承逻辑
构建时要不要转译？
PostCSS 插件（如 postcss-is-pseudo-class）能把 :is() 转成逗号分组，但要注意：:where() 无法真正 polyfill——零权重行为 runtime 无法模拟，转译后反而可能因权重升高引发覆盖问题。
- 推荐策略：现代浏览器用原生，老版本靠 class 回退。例如先写
.card-header, .card-body { padding: 1rem; }，再叠加:is(.card-header, .card-body) { padding: 1.25rem; } - 不要用 JS 动态加 class 模拟
:is()——DOM 遍历开销大，且对动态插入的节点无效 - 真要兼容 IE 或旧 Edge？放弃这两个伪类，老老实实用传统分组 + 手动统一权重
:where() 根本不打算“生效”，它存在的唯一意义是“不干扰”。需要覆盖时，:is() 才是工具；需要兜底时，:where() 才是解药——混淆这两者，比写错一个 class 名更容易让样式失控。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
