复合选择器权重按四元组(a,b,c,d)逐位比较而非加法；id、类/伪类、属性/伪类、元素/伪元素分别计数，高位相等才比低位，!important和内联样式绕过该比较。
复合选择器权重不是加法，是四位数逐位比较
很多人误以为 .nav ul li a 的权重是 “类1 + 标签1 + 标签1 + 标签1 = 4”，或者把类当10、标签当1去算总分。这是错的——浏览器根本不做加法运算，它只按四元组 (a, b, c, d) 分别统计，然后从左到右比大小。
比如：#header .nav a:hover 中：
- 1 个 ID → b = 1
- 1 个类 → c = 1
- 2 个元素（a 和 hover 是伪类，也归入 c）→ 实际 c = 2（因为 :hover 属于伪类，不是伪元素）
- 所以最终是 (0, 1, 2, 0)，不是 (0, 1, 1, 2) 或 “100+10+1+1”
-
:hover、:focus、[type="text"]都算进c位，和类选择器同级 -
::before、::after才算进d位（伪元素），和标签同级 - 空格是后代选择器，不新增权重；
>、+、~这些关系符本身无权重
遇到多个ID或多个类时，c/d位不会“进位”
权重不是十进制数字，(0, 0, 15, 3) 依然小于 (0, 1, 0, 0)。哪怕你写 20 个 class，也压不过一个 ID —— 因为 b 位是 0 vs 1，比到这儿就结束了，后面全不用看。
常见错误场景：
- 在组件里堆
class="btn btn-primary btn-lg btn-block btn-outline"，以为“越多越强”，结果被父级#modal .content p轻松覆盖 - 用
div div div p去试图赢过.item，但(0, 0, 0, 4)(0, 0, 1, 0) -
input[type="email"]:required:focus权重是(0, 0, 3, 0)（1 属性 + 1 伪类 + 1 伪类），不是(0, 0, 1, 2)
!important 和内联样式会彻底绕过权重比较
!important 不是“权重+∞”，而是让这条声明直接跳过整个层叠计算流程，优先级高于所有普通规则（包括内联样式）。但它只作用于单个声明，不影响其他属性。
例如：
#box { color: red !important; background: blue; }
.box { color: green; background: yellow; }
<div id="box" class="box">test</div>
结果是文字红色（!important 生效）、背景黄色（没被覆盖，因为 !important 没加在 background 上）。
- 内联样式如
style="color: pink;"对应(1, 0, 0, 0)，比任何 CSS 文件里的 ID 选择器都高 - 但
!important在内联样式里也有效：style="color: pink !important;"，此时连外部!important都可能被压制（取决于来源顺序） - 多人协作时，
!important容易引发“覆盖战”，建议仅用于调试或第三方库隔离
DevTools里看权重不如自己手算来得准
浏览器 DevTools 显示的“已应用”样式，只告诉你哪条胜出，不展示权重数值。更麻烦的是，它有时会把继承样式、重置样式、user agent 样式混在一起，让你误判冲突源头。
真正可靠的做法是：对疑似冲突的选择器，当场拆解成 (a,b,c,d) 四元组，逐位比。例如：
-
form#search input[name="q"]→(0, 1, 2, 1)（1 ID + 1 属性 + 1 元素） -
.search-box .query-input:focus→(0, 0, 3, 0)（2 类 + 1 伪类） - 比：b=1 vs b=0 → 前者胜，无需再看 c/d
复杂项目里，权重冲突往往藏在抽象组件或第三方 UI 库的深层选择器中，靠“多加一个class”硬顶只会让问题越来越难追溯。最省事的方式，是在写 CSS 时就克制嵌套层级，优先用语义化 class，少依赖结构路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
