:where()规则权重恒为0-0-0，必须搭配外层选择器提权才生效；safari 15.0–15.3存在多选择器解析异常，需实测或拆分规则。
为什么:where()写完样式却没生效
不是语法错，也不是浏览器不支持，而是它真·没权重——:where(.btn)整条规则的 specificity 是 0-0-0，连 button 这种原生标签选择器（权重 0-0-1）都能把它压下去。你看到“没生效”，其实是它被别的规则静默覆盖了，甚至可能被浏览器默认样式盖过。
常见错误现象：
-
:where(.ant-btn) { color: blue; }→ 页面上按钮还是灰色，因为 Ant Design 自己的.ant-btn权重是 0-1-0，比你这条“空气规则”高得多 -
:where(input[disabled])→ 看似想匹配禁用输入框，但整条规则权重为 0，而 UA 样式里input:disabled权重至少是 0-0-1，照样赢 - 在
@media块里单独用:where(img)→ 在 Safari 15.2 下可能整条规则被跳过，连解析都不做
:where()必须搭配外层选择器才真正可用
它自己不提权，只归零；所以“谁来提供权重”才是关键。有效模式永远是：外层一个可控、稳定、业务专属的选择器（比如根容器、主题 class 或语义标签），内层用 :where() 放你想“放弃争夺”的部分。
- ✅ 正确：
.my-app :where(button, input, textarea)→.my-app贡献 0-1-0，内部归零，整体生效且可被后续.my-app .custom-btn覆盖 - ✅ 正确：
article :where(h1, h2)→ 利用语义容器提权，避免和全局h1规则冲突 - ❌ 错误：
:where(.my-app button)→ 整条规则权重 0-0-0，等于没写 - ❌ 错误：
:where(#header) button→ ID 塞进:where()白费，权重仍是 0-0-0
Safari 15.0–15.3 的多选择器列表 bug 很容易被忽略
Chrome 105+、Firefox 103+、Safari 15.4+ 都稳定支持，但 Safari 15.0–15.3 存在真实解析异常：像 :where(.a, .b, .c) 这种写法，在某些版本下会漏掉最后一个选择器（.c 不匹配）。这不是渲染慢或缓存问题，是 CSS 引擎直接跳过了。
- 上线前务必在目标 Safari 版本中实测多选项行为，别只看
@supports selector(:where(*))返回 true 就放心 - 若需兼容 Safari 15.3 及以下，拆成多个独立规则：
:where(.a) {} :where(.b) {} :where(.c) {} - 别指望 PostCSS 插件（如
postcss-preset-env）能降级出等效逻辑——它基本无法转成低权重要求
:where()不能绕过 !important，也不处理伪元素
它只清括号内选择器的权重，不改变声明本身的优先级规则。一旦第三方用了 color: red !important，你的 :where(.btn) { color: blue; } 再靠后也没用。
-
:where(input[type="search"]) { }无法覆盖 Chrome 的::-webkit-search-cancel-button，因为伪元素不在:where()作用范围内，且 UA 规则常带!important -
:where(button):hover合法，但整个规则权重仍是 0-0-0；旧版 Safari 可能直接忽略这种写法 - 涉及 Shadow DOM 或 CSS-in-JS 时，
:where()无法穿透作用域边界，重置只在当前 scope 生效
:where()，而是判断哪一层该留权、哪一层该放权——外层没权，里面再清零也没用；外层权太高，又违背了“便于覆盖”的初衷。这个分寸感，得靠 DevTools 里反复看 Computed 的 specificity 数值来练出来。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
