直接看(a,b,c,d)四位数，从左到右逐位比较，高位不同即分胜负；id数a最高，类/伪类数b次之，标签数d最低，继承样式权重为(0,0,0,0)。
怎么一眼看出哪个选择器权重更高？
直接看 (a, b, c, d) 四位数字，从左到右比大小，高位一不等就立刻分胜负——后面三位压根不用看。
-
#user .btn:hover是(0, 1, 2, 0)（1 个 ID + 2 个类/伪类） -
.modal .content span是(0, 0, 2, 3)（2 个类 + 3 个标签） - b 位 1 > 0，前者直接赢；哪怕后者写了十层嵌套，也撼动不了这个结果
为什么加了 class 还是被覆盖？
因为“加类”不等于“提权”，得看加的是不是真正能提升 c 值的那个类。
- 写
div#main .post→(0, 1, 1, 1)，ID 已锁死高位，再加类或标签都难翻盘 - 想覆盖它？别堆
.post.active.highlight（仍是(0, 1, 3, 0)），不如换思路：用#main .post.override（c从 1→2，但没用——b 没变）；真正有效的是加一个 ID 或改用内联样式 - 更实际的做法：删掉原 ID 选择器，统一用语义类名，比如
.article-header，让所有人站在c维度公平竞争
继承样式为什么总“输”得悄无声息？
继承样式的权重是 (0, 0, 0, 0)，连通配符 * 都不如，哪怕父级是 #app（(0,1,0,0)），子元素只要写一行 p { color: red; }（(0,0,0,1)），立刻生效。
- 别指望靠父级高权重“带飞”子元素样式
-
font-size、color这类可继承属性，一旦子元素有任意直接匹配规则，继承值就自动失效 - 调试时在 DevTools 里看到“灰色的 inherited from…”？那基本就是被覆盖的信号，赶紧查子元素自己的规则
!important 真的能救命吗？
能，但它不是补丁，是手术刀——用错位置，会切掉整个样式系统的可控性。
立即学习“前端免费学习笔记（深入）”；
-
!important的优先级高于内联样式，但它无法覆盖用户样式表（如浏览器插件或系统高对比度设置）里的!important - 两个
!important规则冲突时，还是按(a,b,c,d)比权重，权重相同才看定义顺序 - 最常踩的坑：在组件内部滥用
!important，结果外层容器想覆盖时，被迫也加!important，最后变成!important !important的无效叠加
