内联样式权重固定为1000且不累加，id选择器每个计100，类/属性/伪类选择器各计10，权重比较按(a,b,c,d)四元组从左到右逐位判定。
内联样式的权重是1000，不是“比ID高一点”
内联样式指直接写在HTML元素style属性里的规则，比如<div style="color: blue">。它的权重固定为1000，且不参与累加——哪怕你写了<code>#header .nav a这种复杂选择器，总权重也才121，仍远低于1000。常见错误是以为“多套几层class就能压过内联”，实际完全无效。
注意：!important能覆盖内联样式，但它是独立机制，不属于权重计算体系；滥用!important会破坏可维护性，应优先考虑重构选择器结构。
ID选择器权重为100，且每个ID单独计100
ID选择器以#开头，例如#user-panel，权重就是100。关键点在于：一个选择器里出现几个ID，就乘几个100。比如#app #main #content的权重是300，不是100。现实中极少需要多个ID连用，这往往说明HTML结构或CSS组织有问题。
容易踩的坑：
- ID被用于样式控制时，后续想用class覆盖几乎不可能（100 vs 10），导致只能加
!important或改HTML - ID必须唯一，但CSS不校验这点；重复ID会让选择器行为不可预测，尤其配合JS操作时
类选择器权重是10，但属性和伪类也各算10
类选择器（.btn）、属性选择器（[type="submit"]）、伪类（:hover、:nth-child(2)）权重统一为10，且可叠加。例如.card[data-loaded]:focus的权重是30（10+10+10）。
对比更直观：
-
div.header.active→ 1（元素） + 10（class） + 10（class） = 21 -
#sidebar .menu li a→ 100（ID） + 10（class） + 1（元素） + 1（元素） = 112 -
button[type="primary"]:disabled::before→ 10（属性） + 10（伪类） + 1（伪元素） = 21
别误以为“.btn.btn-lg”比“.btn”权重高一倍——它只是两个class，共20，仍远低于任意一个ID。
权重比较不是算术加法，而是“四位数逐位比”
权威写法是(a,b,c,d)四元组：a是内联个数，b是ID个数，c是class/属性/伪类个数，d是元素/伪元素个数。比较时从左到右，高位相等才看下一位。
所以#nav .link是(0,1,1,0)，而.site-header .nav-item:hover是(0,0,3,0)。前者b=1 > 后者b=0，直接胜出——哪怕后者c=3远大于前者c=1。
这个逻辑常被忽略：很多人只盯着“class多就厉害”，却没意识到ID那一列已经一票否决了所有class和元素组合。
