:where()本身权重恒为0-0-0，必须配合外层有权选择器（如.my-app）才能生效；括号内仅支持简单选择器，类名、ID等会破功；需规避Safari兼容性、压缩工具误删及!important干扰。
为什么单独写 :where(.btn) 无法覆盖第三方样式
它不是“降低”已有选择器权重，而是构造一条全新、权重恒为 0-0-0 的规则。浏览器连 UA 默认样式（如 button { margin: 0.5em; }）都可能盖不过，更别说 Ant Design 的 .ant-btn[disabled]（权重 0-2-1）。你写的 :where(.ant-btn) 匹配成功，但等于没权——不是失效，是太轻，根本进不了层叠队列。
- 常见错误：把整个第三方类名塞进
:where()，比如:where(.ant-btn-primary) - 结果：整条规则权重
0-0-0，业务样式一加（如.my-page .ant-btn）立刻反向覆盖 - 真正生效的前提：外层必须有带权选择器，比如
.my-theme :where(button)，权重来自.my-theme
:where() 括号里能写什么、不能写什么
括号内只接受简单选择器，且任何引入权重的成分都会让整条规则破功或静默失效——DevTools 不报错，但规则根本不出现在样式面板里。
- ✅ 安全：
button、input、[disabled]、h1, h2（纯元素、布尔属性、逗号分隔的简单列表） - ❌ 破功：
.btn、div.class、#header（类名、ID、复合选择器直接让权重回升） - ⚠️ 风险：
[data-role="primary"]（带值属性在 Safari 15.2 下解析不稳定） - ? 禁止：
::placeholder、:hover、:is()、:nth-child()（伪元素、需计算的选择器、嵌套伪类均非法）
怎样写才真正能落地：外层提权 + 内部归零
有效模式永远是“外层可控、内层归零”。外层提供稳定权重起点（主题 class、根容器、组件作用域），:where() 只负责内部目标清权。这不是语法技巧，是层级设计逻辑。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- ✅ 正确：
.my-app :where(button, input, select)（权重来自.my-app，内部归零） - ✅ 正确：
article :where(h1, h2, h3)（利用语义容器提权，避免全局标题冲突） - ✅ 正确：
.ant-modal :where(.ant-btn)（把控制权交给组件自身作用域） - ❌ 错误：
:where(.my-app button)（整条规则权重0-0-0，等于空气） - ❌ 错误：
:where(#main) button（ID 塞进:where()白费，权重仍是0-0-0）
上线前必须检查的三个隐形陷阱
语法对了不等于能用。旧版 Safari、构建工具、第三方 !important 都会绕过你的归零意图。
立即学习“前端免费学习笔记（深入）”；
- Safari 15.2–15.3 对
:where(.a, .b, .c)多选项有解析 bug，可能漏掉最后一个，必须实测 - Webpack/Vite 若启用 cssnano 等压缩插件，可能误删
:where()规则，确认插件配置保留该伪类 - 第三方用了
color: red !important，:where()完全无效——它不穿透!important - 顺序必须严格：
:where()规则得放在第三方 CSS 之后、业务样式之前，否则连参与层叠的机会都没有
:where() 语法，而是判断哪一层该留权、哪一层该放权：外层无权，里面再清零也没用；外层权太高，又违背“便于覆盖”的初衷。 
