:is()权重取括号内最高specificity，如:is(.btn,#header,[data-id])为1-0-0；:where()恒为0-0-0，不参与层叠；二者均因任一子选择器非法而整条规则静默失效。
:is()权重取括号内最高specificity，不是平均也不是相加
浏览器对:is()的权重计算只看括号里所有**合法子选择器中 specificity 最高的那个**，直接拿它的值作为整条规则的权重。比如:is(.btn, #header, [data-id])，权重就是#header的 1-0-0；而:is(.a, .b, .c)权重仍是 0-1-0，和单独写.a完全一样——没提权效果。
常见错误现象：
- 混入 ID 或属性选择器后意外覆盖第三方组件（如 Ant Design 的
.ant-btn） - 写了
:is(div p, .title)这种带空格的复合选择器，权重反而只有 (0,0,0,2)，比.wrapper p还低 - 误以为括号内多个类名能“叠加权重”，实际它不加总、不平均、只取最大
:where()权重恒为0-0-0，不参与层叠竞争
:where()整条规则的权重永远是 0-0-0，不管里面塞了#nav还是div ul li a[href]。它不抢权，只靠外部选择器“借力”——比如nav :where(a, button)的权重只算nav那部分（0-1-0）。
典型误用场景：
-
:where(.btn, #primary) { color: red; }—— 权重为 0，连一个普通button标签选择器（0-0-1）都压不过 - 给
:where()加!important也没用：权重为 0 的声明加!important，仍会被任何非 0 权重规则覆盖 - 在
:where()里塞 ID 或高权重选择器，纯属误导，它根本不会提升效果
括号内一个语法错误，整条规则静默失效
:is()和:where()对括号内语法错误零容忍。任意一个子选择器非法，整条 CSS 规则会被浏览器直接丢弃，控制台可能只报模糊的 InvalidSelectorError，不提示具体位置。
容易触发失效的写法：
- 多余逗号：
:is(.a, , .b)或:where(.x,) - 空项：
:is(.a, ) - 伪元素：
:is(.a::before)、:where(.b::after) - 孤立伪类：
:is(:hover)、:where(:focus)（必须绑定到元素，如a:hover） - Safari 15.4 之前嵌套：
:is(:is(.a, .b))直接失效，而非降级
别指望:where()是“更安全的:is()”
:where()不是用来“安全降权”的，它是专为零干扰场景设计的：CSS Reset、设计系统基底样式、穿透匹配。它真正的价值在于“不抢权”，而不是“能兜底”。
想覆盖别人样式？该用更高 specificity，而不是换伪类。真正需要提权时，:is()才是正解；但只要括号里混进一个 ID，就可能翻车——这点比写法本身更难预判。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
