:where()权重恒为0-0-0，因其内部选择器特异性被规范强制归零，仅依赖外层选择器提供权重；:is()则取括号内合法子选择器的最高权重。
为什么:where()权重恒为0-0-0
因为规范强制规定：:where()内部所有选择器的特异性（specificity）被归零，不参与层叠计算。它只靠外层选择器“借力”——比如nav :where(a, button)的权重就是nav本身的 0-1-0，括号里无论塞#header还是div ul li a，都不加一分。
常见错误现象：:where(.btn, #primary) { color: red; }写完发现压不过button标签样式，不是语法错，而是整条规则权重为 0-0-0，连最基础的元素选择器（0-0-1）都赢不了。
-
:where()不是“降权”，是“归零”；它不比较、不取最大，直接设为 0 - 不能靠它覆盖 UA 样式（如
input[type="text"]），必须在外层加有分量的选择器，例如form :where(input) -
:where(a:hover)在 Safari 15.3 及更早版本会静默失效，控制台可能只报InvalidSelectorError
为什么:is()取括号内最高权重子选择器
:is()本质是“逻辑或”的运行时匹配，但权重计算不是平均、不是累加，而是取括号中**合法且可解析的子选择器里 specificity 最高的那个**。比如:is(.a, .b, #c)整条规则权重就是#c的 1-0-0，哪怕你只想匹配.a元素。
常见错误现象：:is(.btn, .btn-primary):hover被第三方.ui-button:hover覆盖，不是:is()失效，而是你括号里全是类名（0-1-0），而对方用了属性选择器（如[data-role="button"]）或 ID，权重更高。
- 括号内任意一个选择器语法错误（如空项
:is(.a, )、伪元素:is(.a::before)），整条 CSS 规则会被浏览器静默丢弃 - Safari 15.4 之前不支持嵌套
:is(:is())，会直接跳过整条规则 - 混类型才真正有用：
:is(button, [type="submit"], .submit-btn)，权重由[type="submit"]（0-1-0）或更重者决定
:where()写了却没生效，其实是被“零权重”反杀
很多人以为:where()是“更安全的:is()”，结果样式完全不生效。根本原因在于：零权重规则在层叠中天然弱势，哪怕声明在最后，也会被任何非零权重规则覆盖。
典型误用：@media (max-width: 480px) { :where(img) { width: 100%; } } —— 这条规则权重为 0，而.post-content img是 0-2-1，后者必胜。
- 正确做法是让外层提供基础权重：
article :where(img, iframe)或main :where(img) -
!important对:where()无效：权重为 0 的声明加!important，仍会被div（0-0-1）覆盖 - 别在原子化 CSS（如 Tailwind）里滥用
:where()以为能“重置优先级”，它不改变 class 的传播逻辑，也不解决 class 冲突
兼容性与真实生效条件
Chrome 105+、Firefox 103+、Safari 15.4+ 原生支持；旧版本直接忽略整条规则，不报错也不 fallback。这意味着：你写的:where()在 Safari 15.3 上等于没写，而:is()在 Safari 15.4 之前可能部分支持但嵌套失效。
最容易被忽略的一点：权重归零 ≠ 行为归零。:where()照样匹配元素、照样应用样式，只是它在层叠表里永远排在最底——除非你确保它有外层“靠山”，否则它只是个温柔的摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
