选择器权重值按(a,b,c,d)四元组计算：a为内联样式数、b为ID数、c为类/属性/伪类数、d为元素/伪元素数；比较时从左到右逐位比大小，继承样式和通配符权重为0，!important仅在同级中生效。
怎么算一个选择器的权重值？
直接看数字组合：(a, b, c, d)，从左到右依次是：内联样式个数、ID个数、类/属性/伪类个数、元素/伪元素个数。每类只数“出现次数”，不看嵌套深浅或写法顺序。
-
#header .nav a:hover→ 1个ID + 1个类 + 1个元素 + 1个伪类 →(0, 1, 2, 1) -
style="color:red"→ 内联样式 →(1, 0, 0, 0)（直接碾压所有非!important规则） -
div#main ul li:first-child a→ 1个ID + 1个伪类 + 4个元素 →(0, 1, 1, 4)
比较时严格从左往右：先比a，相等再比b，以此类推；(0, 1, 0, 0) > (0, 0, 12, 0)，哪怕后者有12个类也不如1个ID。
为什么加了!important有时还是不生效？
!important不是万能解药——它只在“同级对抗”中胜出，但会被更高来源的!important覆盖。比如用户自定义样式表里的!important能盖过你写的，而浏览器默认样式里基本不用它。
- 作者样式表中：
.btn { color: red !important; } - 用户样式表中：
.btn { color: green !important; }→ 实际生效的是绿色 - 内联样式带
!important？不行——style属性里不能写!important，语法非法
真正危险的是滥用：一旦某处用了!important，后续想覆盖它，就必须用相同或更高权重的选择器+!important，很快陷入死循环。
继承来的样式有没有权重？
没有。color、font-family这类可继承属性，如果子元素没自己声明，就只是“借用”父元素的计算结果，权重为(0, 0, 0, 0)。哪怕父元素用#app这种高权重ID选中，子元素只要写一行span { color: blue; }（权重(0, 0, 0, 1)），就能立刻覆盖继承值。
- 常见错觉：“父元素ID很大，子元素应该被压制” → 实际上继承不参与权重竞争
-
* { color: gray; }也是权重0，连元素选择器都不如，纯属兜底行为
关系选择符（>、+、~）影响权重吗？
完全不影响。.parent > .child和.parent .child权重一样，都是两个类 → (0, 0, 2, 0)。它们只决定匹配逻辑，不增加任何分值。
- 误以为“子选择符更精确所以权重更高” → 是常见误解
- 真正影响权重的只有选择器“组成部分”的类型和数量，不是连接方式
- 通配符
*、否定伪类:not()内部的选择器才计权，:not(.disabled)里的.disabled算1个类
权重系统本质是静态计数，不是运行时匹配深度判断——这点容易被直觉带偏，调试时建议先手算(a,b,c,d)再查DOM结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
