加了 !important 才生效是因为选择器权重不足，如类名 .btn（权10）被 div#header .nav a（权100+10+1=111）覆盖；应通过ID与类组合、属性/伪类选择器等提升权重，而非滥用 !important。
为什么加了 !important 才生效？说明选择器权重不够
CSS 优先级本质是“权重计算”，不是“谁写在后面谁赢”。当你的样式没生效，大概率是选择器太轻——比如只用了一个类名 .btn，却被父容器里一个 div#header .nav a 覆盖了。这时候不是靠堆 !important，而是该让选择器本身更“重”。
用 ID 和类组合快速提升权重
ID 选择器权重（100）远高于类（10）和标签（1），但单独用 ID 不利于复用。更稳妥的做法是组合：
-
#user-panel .profile-card .avatar：ID + 两个类 → 权重 = 100 + 10 + 10 = 120 -
.modal .dialog .confirm-btn：三个类 → 权重 = 10 + 10 + 10 = 30（仍低于上面） - 避免写成
div#main ul.menu li a：标签冗余不增权，还拖慢匹配速度
子选择器 > 比后代选择器空格更精准、权重不变但更可控
权重数值上，.nav > a 和 .nav a 是一样的（都是 10 + 1 = 11），但实际效果差异很大：
-
.nav a匹配所有后代a，容易被深层嵌套的其他规则意外覆盖 -
.nav > a只匹配直接子元素，作用范围明确，减少样式污染风险 - 调试时更容易定位问题：如果样式没生效，先查是不是层级不对，而不是盲目加权
属性选择器和伪类也能悄悄加权
像 [type="submit"]、:hover、:nth-child(2) 这些都算作“类级别”（权重 +10），合理使用可绕过 class 命名冲突：
立即学习“前端免费学习笔记（深入）”；
-
button[disabled]权重 = 标签(1) + 属性(10) = 11，比单纯button（1）高得多 -
a.nav-link:hover= 类(10) + 伪类(10) = 20，比.nav-link多出一倍权重 - 注意：
:not()本身不加权，但里面的内容会算，比如a:not(.external)= 标签(1) + 伪类(10) + 类(10) = 21
真正难搞的从来不是怎么加权，而是加完之后别人改不动、自己半年后看不懂。权重只是工具，层级结构清晰、命名克制、少用 ID 和 !important，才让权重变得可预测。
