:where()权重恒为0-0-0，不参与层叠竞争；:is()取括号内最高权重子选择器。前者靠外层支撑权重，后者可提升整体特异性，二者语法、用途及浏览器兼容性均不同。
:where()权重恒为0-0-0，不参与层叠竞争
整条规则的特异性只靠外层选择器“借力”，括号内无论塞进#nav、div ul li a还是[data-test]，对权重贡献都是零。它不是“低权重”，是彻底不计权。
常见错误现象：:where(.btn) { color: red; }压不过button { color: blue; }——因为后者权重是 0-0-1，而前者整条是 0-0-0。
必须确保外层有基础权重支撑，例如：nav :where(a, button)权重来自nav（0-0-1），内部保持零干扰；但:where(nav a)就失去上下文，匹配不到目标元素。
以下要点需注意：
-
:where()里不能写伪类状态，如:where(a:hover)——语法虽合法，但权重仍为 0，且 Safari 15.3 及更早版本会静默忽略整条规则 - 加
!important也无效：0-0-0 的声明加!important，仍会被任何非零权重规则覆盖 - 它不是“更安全的
:is()”，而是专为零干扰场景设计，比如 CSS Reset、组件库基底样式、<style scoped></style>穿透
:is()取括号内最高权重子选择器
:is()不是分组别名，也不累加权重，它的特异性等于其内部所有合法子选择器中 specificity 最高的那个。比如:is(.a, #b, [type="submit"])整条规则权重就是#b的 1-0-0。
常见错误现象：:is(.btn, .btn-primary, .btn-secondary):hover总被第三方.ui-button:hover覆盖，问题往往不在:is()本身，而在你括号里全是类名（0-1-0），而对方用了属性选择器或 ID。
真正提权有效的写法是混类型：:is(button, [type="submit"], .submit-btn)，这样权重由[type="submit"]（0-1-0）或.submit-btn（0-1-0）决定，比纯标签高，又不至于高到难覆盖。
以下要点需注意：
-
:is()不支持伪元素（如.a::before）和孤立伪类（如单独写:hover） - 括号内任意一个选择器语法错误（比如多逗号：
:is(.a, )、空项、非法字符），整条 CSS 规则会被浏览器静默丢弃 - Safari ≤15.3 不支持嵌套
:is(:is(...))，会直接失效；Chrome 105+、Firefox 103+、Safari 15.4+ 才稳定支持
为什么改个函数名，样式就失效或被覆盖？
根本原因在权重计算逻辑完全不同：:is()把括号内最高权重“带进来”参与整体计算，而:where()把括号内全部“归零”，只靠外部撑腰。
典型反例：:where(.dashboard .card .card-header) .button权重塌缩为.button的 0-1-0；而:is(.dashboard .card .card-header) .button权重是.dashboard .card .card-header的 0-3-0，再加.button变成 0-4-0——两者差了整整三级。
容易被忽略的关键点：
-
:where()里塞 ID 或高权重选择器毫无意义，它不会提升效果，只会制造误解 -
:is()写:is(div p span)这种纯标签链，权重是 (0,0,0,3)，反而比.wrapper .content span（0,0,2,1）更低，更难覆盖 - 两者都不支持
:not(:is(...))以外的嵌套伪类组合，:where(:is(.x))非法，:is(:where(.y))也无效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
