css选择器优先级由四元组(a,b,c,d)权重系统决定，而非声明顺序；a为内联样式、b为id数量、c为类/属性/伪类数量、d为标签/伪元素数量，逐位比较高位胜出，通配符与关系符权重为0。
浏览器解析CSS选择器时，优先级不是“谁写在后面就赢”
它靠一套可计算的权重系统决定哪条规则生效，而不是简单按顺序覆盖。当你发现 .btn 没生效，但 div#nav a 却生效了，大概率不是顺序问题，而是前者权重（0,0,1,0）远低于后者（0,1,0,2）。
这个权重用四元组 (a,b,c,d) 表示：
a 是内联样式（style=""）是否存在（0 或 1）；
b 是 ID 选择器数量；
c 是类/属性/伪类数量；
d 是标签/伪元素数量。
- 比较时严格从左到右：只要
b位不同，c和d就不看了 -
#header nav li.active→ (0,1,1,2)，而.sidebar .menu-item:hover→ (0,0,2,1)，前者胜出 - 通配符
*、子选择器>、相邻兄弟选择器+都不贡献权重，即 (0,0,0,0)
为什么 !important 能绕过所有权重计算？
!important 不是“更高权重”，而是直接脱离层叠规则——它让这条声明跳过常规优先级比对，只按来源（用户样式 > 作者样式 > 浏览器默认）和书写顺序生效。但它只作用于单个声明，不是整条规则。
-
color: red !important;会覆盖其他任何color声明，哪怕对方是style="color: blue" - 但
font-size: 14px;（无!important）仍可能被低权重规则里的font-size: 16px !important覆盖 - 滥用
!important会让调试变得不可预测，尤其在多人协作或第三方 CSS 注入场景下
真实项目里最容易误判优先级的三种写法
很多“样式不生效”问题，根源是选择器组合方式悄悄拉高了权重，自己却没意识到。
-
ul li a:hover看似普通，但三个标签选择器叠加 → (0,0,0,3)，可能意外压过.link-primary（0,0,1,0） -
[data-id="123"]是属性选择器，权重等同于类名，不是“比 class 弱” -
:nth-child(2n)是伪类，计入c位；但::before是伪元素，只计d位 → 权重更低
开发者工具里怎么看实际生效的权重？
Chrome / Firefox 的“计算样式”面板不会直接显示 (a,b,c,d)，但能暴露关键线索：
- 找到被划掉的样式，点开右侧的“继承自”或“层叠”标签，看哪些规则参与了竞争
- 注意每条规则末尾是否标有
specificity: 0,1,1,0（部分新版 DevTools 已支持显示） - 如果某条规则来自
user agent stylesheet却生效了，说明你的规则连匹配都没成功——可能是选择器写错，而非优先级问题
真正难的不是算权重，而是意识到：你写的那个看似“更具体”的选择器，可能正因嵌套过深，反而成了别人用一个 ID 就能轻松覆盖的靶子。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
