css权重按四元组(a,b,c,d)逐位比较：a为内联样式数，b为id数，c为类/属性/伪类数，d为标签/伪元素数；高位相等才比低位，如(0,1,2,0)>(0,0,0,2)，且!important不改变权重仅提升声明级别。
CSS权重怎么算：不是加法，是“四元组”比大小
权重不是简单相加的数字，而是一组四位数 (a,b,c,d)，浏览器逐位比较：高位大者胜，相等再比下一位。比如 #nav .link:hover 是 (0,1,2,0)，div a 是 (0,0,0,2)，前者直接赢——哪怕你写了 99 个类，也压不过一个 ID 的 b=1。
常见误区是以为多写几个类就能“堆高权重”，但 .btn.primary.large.active 还是 (0,0,4,0)，和 #main-nav 的 (0,1,0,0) 完全不在一个量级。
-
style=""内联样式 →(1,0,0,0) -
#headerID 选择器 →(0,1,0,0) -
.nav-item、[type="submit"]、:hover→ 各算 1 个c，即(0,0,1,0) -
div、p::before→ 各算 1 个d，即(0,0,0,1) -
*、>、+、空格 → 不加分
为什么!important总在 DevTools 里被划掉还不管用
加了 !important 却没生效？大概率不是权重不够，而是撞上了更高层级的规则：
- 目标元素本身有
style="color: blue !important"—— 内联 +!important是(1,0,0,0) + important，你的外部 CSS 再怎么写都输 - 第三方组件（如 Ant Design、Element Plus）在 JS 中动态设置
element.style.color，这属于内联样式层级，权重天然碾压 - 另一个同样带
!important的规则，但选择器权重更高，比如button[disabled].ant-btn是(0,0,2,1)，比你的.btn高
别急着加父级或再塞 !important，先打开 Chrome DevTools → Elements → 点击元素 → 看 Styles 面板里哪条被划掉，再切到 Computed 面板查最终值来源，比猜快得多。
BEM 和组合类名：不靠暴力，靠结构提权
真正可持续的提权，是让选择器在标准权重体系里赢，而不是绕开它。BEM 强制单类名（如 .header__logo--large），权重恒为 (0,0,1,0)，靠命名隔离而非堆叠，既避免权重爆炸，又杜绝 !important 依赖。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
其他安全提权方式：
- 复用已有语义类：
.btn.btn--disabled（c=2）比新增无意义类.btn-disabled-state更轻量且效果一致 - 利用父容器上下文：
.checkout-page .price天然盖过全局.price，作用域清晰，不污染全局 - 属性选择器辅助：
input[type="email"]权重(0,0,1,1)，比单纯input高一级，又不破坏语义 - 慎用 ID：提权快（
b+1），但难复用，且易与 JS 的document.getElementById绑定冲突
哪些场景真该用!important：当它是手术刀，不是锤子
!important 不该消失，但必须满足两个硬条件：无法修改 DOM 结构 + 有明确可追溯的业务理由。
- 覆盖富文本编辑器输出的内联样式（你根本改不了 HTML）
- 响应式兜底强制隐藏：
@media (max-width: 768px) { .nav-drawer { display: none !important; } }，前提是这个行为不能被其他规则干扰 - 高对比度模式适配：
@media (forced-colors: active) { * { outline: 2px solid ButtonText !important; } }
写法上注意空格：color: #333 !important; 少一个空格，整条声明就失效。Vue/React 中弹层挂载到 时，scoped 样式命中不了，这时与其疯狂加 !important，不如用 :where(.my-theme) .popup { ... } 主动降权再精准控制。
最常被忽略的一点：权重计算只看选择器本身，和文件位置、SCSS 嵌套深度、是否用了 @import 都无关。很多“我以为提权了”的问题，其实只是没看清 DevTools 里真实生效的那条规则来自哪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
