CSS权重是按位比较的四元组(a,b,c,d)：a为内联样式（0或1），b为ID个数，c为类/属性/伪类总数，d为标签/伪元素总数；高位优先比较，不叠加不进位。
CSS 权重不是“加起来比大小”的数字，而是按位比较的四元组 (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 个标签/伪元素）
因为权重比较是“高位优先”：前者是 (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) 四位，一位一位比，问题就清楚了。