第三方CSS框架样式权重高是设计使然，因其大量使用ID选择器、多重类名连写和深度嵌套提升特异性；覆盖失效常因选择器未匹配真实DOM结构，需检查class名、scoped编译、Shadow DOM隔离及all:unset重置；提权应优先确保精准匹配，再用BEM、属性选择器等安全方式同级竞争。
第三方 CSS 框架（如 Bootstrap、Ant Design、Element Plus）的样式通常赢在权重高位，不是你写得不够多，而是它们早一步占了 #app、.ant-btn-primary 或深度嵌套结构（比如 .el-dialog__header .el-dialog__title），直接把你的 .my-button 压得抬不起头——这不是 bug，是设计使然。
为什么框架样式总“赢”？看懂它的权重埋点
框架不靠堆 class，靠三类高权重组合：
- ID 选择器：部分组件会注入
#app或#root作为父容器，再用#app .btn就已拿到 b=1 - 多重类名连写：
.ant-btn.ant-btn-primary.ant-btn-lg→ c=3，而你只写.my-btn→ c=1 - 深度嵌套：
.modal .footer .button-group > button→ d 值轻松到 4~5，且中间还夹着类，c 值同步上升
注意：:where() 和 :is() 在框架里常被用来“降权保兼容”，但你写的普通选择器没这待遇；[data-v-xxx] 这类哈希属性在 Vue scoped 场景下也计入 c 位，相当于白送 +10。
别硬刚权重，先确认你的选择器真匹配上了
很多“覆盖失效”根本不是权重问题，而是选择器压根没命中 DOM：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 检查 DevTools 中元素实际 class 名：
button--primary≠button-primary（连字符错一位就全挂） - Vue scoped 或 CSS Modules 下，你写的
.card .title实际编译为.card[data-v-abc] .title[data-v-abc]，而你自定义样式没加属性选择器 → 不匹配 - Shadow DOM 内部样式完全隔离，外部 CSS 无效，连权重比较都无从谈起
- 框架可能用
all: unset重置子元素，导致你设的color被继承值覆盖，而非被其他规则压掉
安全提权的实操路径：从结构到命名
目标不是“比框架更高”，而是“和它同级但更准”：
- 用 BEM 单类名替代嵌套：
.modal__confirm-btn（c=1）比.modal .confirm-btn（c=2, d=1）更可控，且避免父级变动导致失效 - 加属性选择器兜底：
button[data-type="confirm"]权重 = c=1，和 class 持平，但语义更强、不易被泛化规则误伤 - 必要时主动嵌套一层容器：
.my-app .ant-btn→ b=0, c=2（.my-app + .ant-btn），但慎用，污染全局需评估 - 加载顺序卡位：确保你的 CSS
<link>放在框架之后；@import不可靠，跳过不用
最后提醒：框架里带 !important 的规则（比如某些 reset 或主题色），你再加 !important 也没用——此时唯一解法是改 HTML 结构或用 JS 动态加 class，而不是继续在 CSS 里死磕。权重计算只是起点，匹配真实 DOM 才是第一道门槛。
