css选择器优先级总是混乱怎么办_理解css权重计算规则

权重是浏览器按(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.primary vs .btn:focus → 都是c=2 → (0,0,2,0)，后写的生效
• .card .title（c=2）vs .sidebar-title（c=1）→ 前者胜出，跟位置无关

所以，靠“把新样式放最后”来覆盖旧样式，本质是在赌权重碰巧相等——这不可靠，也不可持续。