css权重按“a,b,c,d”四位计算：内联样式为(1,0,0,0)，id选择器每1个加b=1，类/属性/伪类每1个加c=1，元素/伪元素每1个加d=1，各部分独立计数不进位。
内联样式（style 属性）不是“一定赢”，而是“赢在起跑线”——但 !important 能直接抢跑，且不按规则出牌。
怎么快速算出两个选择器谁的权重高
别背四元组（a,b,c,d），直接换算成十进制数更直观：把 ID 当 100、类/伪类/属性当 10、标签当 1，内联样式固定为 1000。比如：
-
#nav .menu a:hover→ 1 个 ID（100） + 1 个类（10） + 1 个标签（1） + 1 个伪类（10） = 121 -
div#header ul li.active→ 1 个 ID（100） + 3 个标签（3×1=3） + 1 个类（10） = 113 -
style="color:red"→ 固定 1000，不管后面跟多少#id或.class
注意：空格、>、+、~ 这些组合符不加分；通配符 *、伪元素 ::before 也只算 1 分（不是 0）；::first-letter 是伪元素，不是伪类，别误加到 c 位。
!important 真的能无视一切吗
不能。它只作用于**单个声明**，不提升整个选择器的权重，也不影响其他属性。例如：
.btn { color: blue !important; font-size: 14px; }
#main .btn { color: red; font-size: 16px !important; }
结果是：color 取 blue（因为先声明且带 !important），font-size 取 16px（后声明且带 !important）。关键点：
-
!important仅对当前属性生效，不“传染”给同规则其他属性 - 多个
!important同时存在时，仍要按选择器权重 + 书写顺序判断 - IE6 对
!important有 bug：同一规则中后写的!important可能被忽略
为什么开发者工具里显示权重是 (0,1,1,1)，但我算出来是 111
这是两套计数逻辑并存：浏览器内部用四元组（a,b,c,d）做逐位比较，人眼习惯十进制加总。它们等价，但不能混用。例如：
-
#user [type="email"]:focus→ (0,1,2,0) = 0×1000 + 1×100 + 2×10 + 0×1 = 120 -
div#user input:focus→ (0,1,1,2) = 0×1000 + 1×100 + 1×10 + 2×1 = 112
虽然十进制差 8，但浏览器比的是 (0,1,2,0) vs (0,1,1,2)：a 相同比 b（都是 1），b 相同比 c（2 > 1），立刻终止，不看 d。所以 [type="email"] 那条胜出——哪怕你手动加总觉得只差一点，实际比较根本不会走到 d 位。
交集选择器和并集选择器的权重怎么算
交集（如 div.header）是**所有部分权重相加**；并集（如 div, .header）是**每个选择器单独算，各自生效**，不叠加。
-
div.header#main→ 1 标签（1） + 1 类（10） + 1 ID（100） = 111 -
div, .header, #main→ 三条独立规则：权重分别是 1、10、100；各自匹配对应元素，互不影响 - 错误认知：“
div, .header总权重是 11”——不存在这种算法，浏览器不这么处理
容易被忽略的是：交集选择器里哪怕只多一个空格，就变成后代选择器，权重结构全变。比如 div .header 是 (0,0,1,2)，而 div.header 是 (0,0,1,1)，差的那 1 分，可能就是样式生效与否的临界点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
