CSS选择器权重按(a,b,c,d)四元组逐位比较：a为内联样式数，b为ID数，c为类/伪类/属性选择器数，d为标签/伪元素数；高位相等才比低位，如(0,1,1,0)＞(0,0,3,0)。
怎么算出两个选择器的权重值
浏览器不直接比较“谁更具体”，而是把每个选择器拆成四类成分，分别计数后组成 (a,b,c,d) 四元组。关键不是加总，而是逐位比大小：先看 a（内联样式），一样再看 b（ID 数量），依此类推。
常见错误是把 .nav #header .item:hover 当成“一个整体”去估权重。它实际含：0 个内联样式、1 个 ID（#header）、3 个类/伪类（.nav、.item、:hover）、0 个元素标签 → 权重为 (0,1,3,0)。
-
#main .btn.active→(0,1,2,0) -
div#sidebar ul li a→(0,1,0,4)（注意：4 个标签名，ID 只算 1 次） -
style="color:red"在元素上 → 直接是(1,0,0,0)，无需计算其他部分
为什么 class 和 :hover 权重一样却经常“输”给 ID
因为权重比较是高位优先：b 位（ID）哪怕只多 1，就直接胜出，后面 c、d 全部作废。比如 #user .name（(0,1,1,0)）永远压过 .profile .avatar:hover .status（(0,0,3,0)），哪怕后者有三个类+伪类。
这不是“数量不够”，而是规则设计如此——ID 被赋予更高层级的语义权重，浏览器不给你“堆 class 换 ID”的机会。
- 误以为
.a.b.c.d.e（5 个类）能赢#id：错，(0,1,0,0)>(0,0,5,0) - 用
div#app section.main p strong这种长链想靠d堆高：它只是(0,1,0,5)，依然输给任何带 ID 的对手 - 伪元素
::before算d=1，和span同级；但伪类:hover算c=1，和.class同级
!important 和内联样式谁更强
!important 是唯一能压倒内联样式的存在，但它不参与 (a,b,c,d) 计算，而是单独提升声明级别。只要写在声明末尾，就跳过所有权重比对环节。
但要注意：用户自定义样式表里的 !important 也能覆盖作者写的 !important，这是规范行为，不是 bug。
-
color: red !important;→ 覆盖style="color: blue;" -
color: green;（无!important）→ 即使权重再高，也输给了上面那条 - 多个
!important冲突时，仍走层叠顺序：后写的生效
权重相同时到底按什么决定
当两个选择器的 (a,b,c,d) 完全一致，浏览器就放弃权重判断，改用 CSS 文件中“出现顺序靠后”的那条。这个顺序指解析时的源码位置，不是 DOM 结构深浅，也不是文件加载先后。
容易被忽略的是：@import 引入的样式表，其内部规则的“源顺序”仍以它在主文件中出现的位置为准，不是它自身文件里的顺序。
-
.btn { color: red; }和:hover { color: blue; }都是(0,0,1,0)→ 后者生效 - 同一行里写
.item:hover, .item:focus { ... }，两个伪类共享同一个权重，不互相覆盖 - 用
@import加载的 reset.css 如果放在自己样式之后，它的同权规则会被覆盖
真正难调试的不是“算错权重”，而是没意识到某条规则来自第三方库、CSS-in-JS 注入、或 shadow DOM 边界——那些地方的权重计算独立进行，且外部无法用常规选择器干预。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
