CSS权重是按位比较的四元组(a,b,c,d)：a为内联样式（0或1），b为ID个数，c为类/属性/伪类总数，d为标签/伪元素总数；高位优先比较，不叠加不进位。
CSS 权重不是“加起来比大小”的数字，而是按位比较的四元组 (a, b, c, d)：谁在左边（高位）大，谁就赢，根本不会算到右边去。
怎么算出 (a,b,c,d)？看选择器里有什么
拆开你的选择器，逐类计数，不叠加、不进位、不靠嵌套深度：
-
a = 1当且仅当用了style="..."内联样式；否则为0 -
b是 ID 选择器个数，比如#nav #user→b = 2（不是 200） -
c是类名.btn、属性[type]、伪类:hover的总个数 -
d是标签名div、伪元素::before的总个数
例如：article#main .post[data-id]:hover::after → (0, 1, 3, 2)（1 个 ID、3 个类/属性/伪类、2 个标签/伪元素）
为什么 .modal .content span 比不过 #user-name？
因为权重比较是“高位优先”：前者是 (0, 0, 2, 3)，后者是 (0, 1, 0, 0)。b 位 1 > 0，直接胜出——后面三位压根不比。
立即学习“前端免费学习笔记（深入）”；
- 深层嵌套（如
.a .b .c .d .e）只增加d，最多凑到 5，远不如一个 ID 的b = 1 -
>、+、空格这些组合符不贡献任何权重，只影响匹配逻辑 -
:not(.active)本身不加权，但括号里的.active算 1 个c
继承来的样式为什么总被覆盖？
继承值的权重是 (0, 0, 0, 0)，哪怕父级是 #app（权重 (0,1,0,0)），子元素只要写一行 p { color: red; }（(0,0,0,1)），立刻生效。
- 别指望靠父级高权重“透传”样式，该加类就得加类
- 想统一控制？用语义类名，比如
.text-emphasis，而不是.section h2层层兜底 -
!important虽能破局，但它会污染可维护性，且无法覆盖用户样式表里的!important
两个规则权重一样时，谁赢？
只有当 (a,b,c,d) 完全相等，浏览器才看 CSS 文件里谁定义在后面。比如：
.btn.primary { color: blue; }
.btn:focus { color: red; }
两者都是 (0,0,2,0)，所以后写的 :focus 生效。但这不是可靠策略——一旦有人改顺序或抽离样式，就失效。
真正稳的做法，是让目标元素的选择器“本身”就足够明确，比如直接写 .btn.primary:focus（(0,0,3,0)），而不是赌顺序。
最容易被忽略的一点：权重计算和 DOM 结构深度无关，和选择器写法“看起来多不多”也无关——只看你用了几个 ID、几个类、几个标签。盯住 (a,b,c,d) 四位，一位一位比，问题就清楚了。
