:is()取括号内最高权重，:where()恒为0-0-0；前者参与层叠竞争，后者不参与，仅靠外部选择器“借力”；语法错误、伪元素、孤立伪类、空项或safari旧版嵌套均导致整条规则静默失效。
:is() 和 :where() 语法几乎一样，但权重计算逻辑截然不同——这是唯一真正影响样式的区别，其他全是表象。
权重怎么算？:is()取括号内最高权重，:where()恒为0-0-0
浏览器对 :is() 的权重不是加总、也不是平均，而是直接取括号里所有合法子选择器中 specificity 最高的那个。比如 :is(.btn, #header, [data-id]) 整条规则的权重就是 #header 的 1-0-0。
:where() 则完全不参与层叠竞争：无论里面塞了 #nav 还是 div ul li a，整条规则权重始终是 0-0-0。它只靠外部选择器“借力”，比如 nav :where(a, button) 的权重只算 nav 那部分（0-1-0）。
- 常见错误现象：
:where(.btn, #primary)看似想“兜底 + 提权”，实际整条规则权重是 0，连一个普通button标签选择器（0-0-1）都压不过 - 反过来，
:is(.btn, #primary)权重直接按#primary（0-1-0）算，可能意外覆盖你本不想动的.modal .btn规则 -
!important对:where()无效：权重为 0 的声明加!important，仍会被任何非 0 权重规则覆盖
哪些写法会静默失效？括号内语法错误直接丢弃整条规则
:is() 和 :where() 都要求括号内每个子选择器语法合法。任意一个出错，整条 CSS 规则会被浏览器静默丢弃，不报错也不生效。
- 不支持伪元素：
:is(.a::before)、:where(.b::after)是非法的，整条规则失效 - 不支持孤立伪类：
:is(:hover)或:where(:focus)单独出现会失败（必须绑定到具体元素，如a:hover） - 空项或多余逗号：
:is(.a, , .b)或:where(.x,)会导致整条规则被忽略 - Safari 15.4 之前不支持嵌套：
:is(:is(.a, .b))会直接失效，而非降级处理
什么时候该用 :is()，什么时候必须换 :where()？
选哪个不看“新不新”，而看你要不要参与权重竞争。
-
:is()适合你**本就打算提高权重**的场景：比如把.card h2, .post h2, .section h2合并成:is(.card, .post, .section) h2，同时自然获得和单个类名一致的 0-1-0 权重 -
:where()只适合“加样式但绝不抢权”的场景：比如重置第三方库按钮边框、统一禁用某类元素光标——:where(button, input[type="button"], [role="button"]) { cursor: default; }不会压过任何已有的button:hover { cursor: pointer; } - 别在
:where()里塞 ID 或高权重选择器——它不会提升效果，只会制造误解；也别指望它“安全降权”，它根本没权可降
最易被忽略的一点：你改了一个函数名，样式就失效或被覆盖，问题不在语法，而在权重逻辑切换。浏览器不关心你写的是 :is 还是 :where，只认最终算出来的 specificity 数字。写之前先心算一遍权重，比查文档更管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
