选择器权重过高会导致样式覆盖困难，:where()可将指定类名权重归零，但外层容器class必须保留权重以确保生效，同时需避免全局标签样式和无差别重置。
为什么选择器权重高反而坏事
第三方组件库或历史代码里常见 .ant-btn[disabled].ant-btn-primary 这类选择器，权重高达 0-3-1，你写 .my-app .ant-btn[disabled] 反而变成 0-4-1，更难覆盖；不是你没写对，是权重堆太高导致“越改越盖不住”。
用 :where() 把第三方类名权重归零
只把你要“放行覆盖”的那部分包进 :where()，外层容器 class 必须保留权重：
- ✅ 正确：
.my-theme :where(.ant-btn)[disabled]→ 权重 = 0-1-0（仅靠.my-theme） - ✅ 正确：
.my-theme :where([disabled])→[disabled]不加权，整体仍是 0-1-0 - ❌ 错误：
:where(.my-theme .ant-btn)→ 整条规则权重 0-0-0，基础样式都可能丢 - ❌ 错误：
:where(#header)→ ID 被归零后彻底失效，匹配成功但不生效
别硬刚行内样式，先断源头
style="color: red" 权重是 1000，任何 class 都打不过。合法覆盖只有 !important，但更该做的是避免它出现：
- React/Vue 里传
styleprop？→ 改用className+ CSS 类 - 服务端模板拼
？→ 抽成data-status="active"+ 外部规则 - JS 动态设
el.style.color？→ 改用el.classList.add("is-highlight") -
[style]伪类？→ 它只能匹配属性存在，不能覆盖值，别当解药
模块样式必须锁进父级锚点
同一页面多个卡片模块，别写 .title，直接用组合选择器划清边界：
立即学习“前端免费学习笔记（深入）”；
- ✅
.user-card .title或.user-card__title（BEM） - ✅ 深层结构优先用子选择器：
.modal > .footer > button，比空格更精准 - ❌ 禁止在模块里写
button { }全局标签样式 - ❌ 避免
all: unset无差别重置，漏掉box-sizing或font-family会引发连锁错位
真正卡住人的从来不是“怎么提权”，而是哪部分该保权、哪部分该弃权——:where() 不是万能钥匙，它只负责把干扰项的权重清零；剩下那点权重，得靠你亲手分配给真正该管事的容器 class。
