!important不解决权重问题，而是绕过层叠规则；应通过提升选择器特殊性（如合理用ID、class）使权重在标准体系内胜出，避免破坏可维护性。
为什么!important不是选择器权重不够时的合理补救
用 !important 解决样式覆盖问题，本质是绕过 CSS 层叠规则——它不提升选择器得分，而是直接打断优先级计算流程。浏览器会把带 !important 的声明单独归类、最后比对，导致调试时难以预测哪条生效，协作中更易引发“谁加的这个 !important？”式甩锅。
真正该做的是让选择器在标准权重体系内赢过对手，而不是靠暴力标记。
怎么算清选择器特殊性（specificity）得分
CSS 选择器权重是三位十进制数：(a,b,c)，对应：
- a：内联样式的数量（
style="..."算 1，其余全为 0） - b：ID 选择器的数量（
#header算 1） - c：类名、属性选择器、伪类的数量（
.btn、[type="submit"]、:hover各算 1）
标签名和伪元素（如 ::before）不计入得分。例如：
立即学习“前端免费学习笔记（深入）”；
.nav ul li a { /* c = 4 */ }
#main .nav-item.active { /* b = 1, c = 2 → 0,1,2 */ }
body #page .sidebar [data-role="menu"] { /* b = 1, c = 3 → 0,1,3 */ }比较时逐位对比：高位大者胜；相等再比下一位。所以 0,1,3 > 0,0,999 —— 类再多也压不过一个 ID。
提升选择器特殊性的安全做法
目标明确：在不破坏可维护性的前提下，让得分刚好高于干扰源。常见有效手段：
- 复用已有 class，而非新增无语义 class：
.btn-primary.is-disabled比.btn-primary.disabled-state更轻量且得分相同（都是 c=2） - 利用父级 class 锁定上下文：
.modal .btn-danger（c=2）通常能盖过全局.btn-danger（c=1），且不污染全局命名空间 - 避免盲目加标签名：
div.header nav ul li a得分高但脆弱——换个标签就失效，且 c 值虚高，实际不如.header-nav-link - 慎用 ID：虽然提分快（b+1），但 ID 在组件化场景中难复用，还可能和 JS 绑定冲突（如
document.getElementById('xxx')）
哪些“提分操作”反而埋了坑
看似提升权重，实则引入新问题：
- 嵌套过深：Sass/Less 中写
.card { .title { .highlight { ... } } }，编译后可能是.card .title .highlight（c=3），但可读性差、复用率低、CSS 文件体积膨胀 - 滥用属性选择器：
button[disabled]得分同 class（c=1），但比.is-disabled更难测试、更难通过 JS 切换（得操作 DOM 属性而非 classList） - 依赖 HTML 结构：
article > h2 + p得分不高（c=3），但一旦结构微调（比如加了个div包裹p），样式立刻失效，排查成本远高于重写一条 class 规则
特殊性得分不是越高越好，而是“刚好够用、清晰可控、结构解耦”。真正难的不是算出 (0,1,2)，而是判断要不要让 .form-group 和 .input-field 共享一套尺寸逻辑，还是各自独立声明。
