权重是浏览器按(a,b,c,d)四元组逐位比较的数值，a为内联样式数，b为ID个数×100，c为类/属性/伪类个数×10，d为元素/伪元素个数，继承样式权重为0，冲突时仅当四元组完全相等才按书写顺序决定。
别硬记数字，先搞懂权重是怎么“算出来”的——它不是抽象概念，而是浏览器实实在在执行的一套比较逻辑。
权重本质是四位数比较（a,b,c,d）
每个选择器都会被拆解成一个四元组（a,b,c,d），浏览器从左到右逐位比大小：
-
a：内联样式数量（
style="..."），有则为1，否则0 -
b：ID选择器个数（如
#nav），每个+100，但只计数量，不叠加 -
c：类/属性/伪类个数（如
.btn、[type]、:hover），每个+10 -
d：元素/伪元素个数（如
div、::before），每个+1
例如：#header .nav-item.active:hover → b=1, c=2, d=1 → 实际比较值是 (0,1,2,1)；article ul li a → b=0, c=0, d=4 → (0,0,0,4)。前者胜出，因为b位1＞0。
别被“嵌套深=权重高”骗了
深层结构本身不提升权重。比如.modal .content .text span em只是d=5，总权重才5；而一个#user-name的b=1，权重就是100，直接碾压。
立即学习“前端免费学习笔记（深入）”；
- 后代选择器（空格）和子选择器（
>）只影响匹配范围，不改变权重计算方式 -
nav > ul > li > a和nav ul li a权重完全一样（都是d=4），只是前者更严格限制层级 - 真正拉高权重的，永远是ID、类、伪类这些“类型”，不是“层数”
继承来的样式没有权重
父元素设的color或font-size传给子元素，属于“继承值”，它的权重是0。哪怕父选择器是#app（权重100），子元素只要写一行p { color: red; }（权重1），就立刻覆盖。
- 不要指望靠父级高权重让子元素“自动变色”，该写的规则得直接写在目标元素上
- 想复用？用类名统一控制，比如给所有需要强调的文本加
.highlight，而不是依赖.section h2层层透传
冲突时，顺序只是“最后的裁决者”
只有当两个选择器的(a,b,c,d)完全相等，浏览器才看谁写在后面。比如：
-
.btn.primaryvs.btn:focus→ 都是c=2 → (0,0,2,0)，后写的生效 -
.card .title（c=2）vs.sidebar-title（c=1）→ 前者胜出，跟位置无关
所以，靠“把新样式放最后”来覆盖旧样式，本质是在赌权重碰巧相等——这不可靠，也不可持续。
