CSS权重是(a,b,c,d)四位数逐位比较而非加法，高位相等才比下一位；:not()不增权，::is()取最高分支权，:where()恒为(0,0,0,0)；内联样式为(1,0,0,0)，!important独立于权重系统。
权重不是加法，是 (a,b,c,d) 四位数逐位比较
很多人把 #nav .item:hover 的优先级算成 100 + 10 + 10 = 120，这是错的。CSS 权重本质是四个独立数字：(a, b, c, d)，从左到右比大小，高位相等才看下一位，不进位、不相加。
比如这两个选择器：
-
#main .item:hover→(0, 1, 2, 0)（1 个 ID，2 个类/伪类） -
div#content p.text::before→(0, 1, 1, 2)（1 个 ID，1 个类/属性，2 个标签/伪元素）
b 都是 1，继续比 c：2 > 1，前者胜出——哪怕后者多一个标签和一个伪元素，d 再大也无效。
:not() 和 ::is() 的权重容易误判
:not() 本身不增加权重，只看括号里内容。例如 button:not(.primary) 和 button.primary 权重完全一样，都是 (0, 0, 1, 1)。
立即学习“前端免费学习笔记（深入）”；
::is() 和 :where() 行为相反：
-
::is(.a, #b)按其中最高分支算，即按#b的(0, 1, 0, 0) -
:where(.a, #b)恒为(0, 0, 0, 0)，强制降权
用错会直接导致样式失效，尤其在组件封装时容易踩坑。
内联样式和 !important 不是同一层机制
style="color:red" 对应权重 (1, 0, 0, 0)，它属于“内联”层级，但仍是权重系统的一部分；而 !important 是独立裁决层，绕过整个权重计算。
关键区别：
- 两个都带
!important，仍要回退到(a,b,c,d)比较 -
style="color:green !important"合法，且高于任何外部!important声明 - DevTools 里看到带删除线的样式，往往是被更高权重的
!important覆盖，不是没加载
组合符（>、+、空格、~）完全不参与权重计算
这些只是关系描述符，不影响 (a,b,c,d) 的任何一位。例如：
-
nav > ul li a和nav ul li a权重完全相同，都是(0, 0, 0, 4) -
input[type="text"]中的[type="text"]是属性选择器，算 c 位，input算 d 位 →(0, 0, 1, 1)
真正影响权重的，永远只有显式写出的选择器类型，而不是它们怎么连在一起。
