优先级（特异性）先于源码顺序起作用；仅当四元组(a,b,c,d)完全相等时，后定义的规则才覆盖前定义的。a为行内样式计数，b为id个数，c为类/属性/伪类个数，d为元素/伪元素个数，比较严格从左到右。
优先级（特异性）永远先于源码顺序起作用；只有当两个规则的 (a, b, c, d) 完全相等时，后定义的才会覆盖前定义的。
优先级计算不看顺序，只看选择器构成
浏览器在应用样式前，会为每条 CSS 规则独立计算一个四元组权重 (a, b, c, d)，这个过程与它写在文件哪一行、哪个文件、是否用 @import 引入完全无关。
-
a：仅当存在style=""行内样式时为1，否则为0 -
b：ID 选择器个数，如#nav #header算2 -
c：类 / 属性 / 伪类个数，如.btn[disabled]:hover算3 -
d：元素 / 伪元素个数，如div p::before算3
比较时严格从左到右：只要某一位 b 值更大，就直接胜出，c 和 d 再大也无效。比如 #sidebar .item（0,1,1,0）一定压过 .nav-link.active:hover（0,0,3,0），哪怕后者写在全局样式表末尾。
源码顺序只在权重完全相等时生效
所谓“后写的覆盖前写的”，仅适用于权重一模一样的情况。这常见于：
- 同名类选择器重复定义：
.card { color: red; }和.card { color: blue; } - 相同组合的选择器：
div p与另一个div p - 都未指定选择器，仅靠继承或初始值（此时权重为
0,0,0,0）
注意：@import 的引入位置会影响“源顺序”的判定范围——它把被导入文件的内容逻辑上插入到 @import 所在行，所以 @import 后续定义的规则，仍可能覆盖导入内容里的同权规则。
!important 不改变权重，但打断常规层叠流程
!important 不是给选择器加权，而是将该声明提升到“重要性”层级，凌驾于所有非 !important 规则之上。但它仍要参与同级比对：
- 两个都带
!important的规则，仍按(a,b,c,d)比较，权重高者胜 - 一个带
!important，一个不带，前者无条件胜出（除非后者是行内style+!important） -
!important仅作用于单个声明，不影响整条规则的其他属性
典型陷阱：max-width 和 width 是独立属性，width: 200px !important 不会阻止 max-width: 100px 生效——因为后者没被标记，也不冲突，只是约束了最终渲染宽度。
调试时别猜顺序，直接看 computed 值里的 specificity
浏览器开发者工具的 Computed 面板里，点击某个属性右侧的箭头，能看到所有影响该属性的规则，并明确标出每条的 specificity 值（如 0,1,1,1）。这才是唯一可信依据。
手算容易漏掉隐式选择器（比如 :where() 权重为 0,0,0,0）、伪类嵌套或属性选择器数量；而 DevTools 显示的是浏览器真实解析结果。遇到“明明写后面却不生效”，第一反应不该是调顺序，而是打开面板确认两条规则的 specificity 是否真的一样。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
