CSS优先级由选择器权重决定，而非书写顺序；权重按(a,b,c,d)四位逐位比较，ID选择器(b位)单个即胜过所有类组合(c位)，如#header .nav a(0,1,1,1) > .menu-link.active(0,0,2,0)。
因为样式不生效、覆盖失效、调试像猜谜——这些问题几乎都卡在优先级算错上。
为什么 #header .nav a 会赢过 .menu-link.active
不是“写在后面就生效”，而是权重比大小。前者是 ID + 类 + 元素，对应 (0,1,1,1)；后者是两个类，(0,0,2,0)。比较时先看第二位：1 > 0，直接胜出，哪怕后面写了 100 行也不管用。
- ID 选择器单个就压倒所有类组合，
#btn能盖过.btn.primary.large - 属性选择器
[data-role="tab"]和类选择器权重一样，都是c=1，可混用提升特异性 - 伪类如
:hover、:nth-child(2)也计入c，不是“附加效果”，是实打实的权重加成
!important 真的能救命吗？
能，但只救一时，且代价明确：它把单条声明拉到最高层级，但不改变选择器本身的权重。比如：
.card { color: red !important; }
#profile .card { color: blue; }
结果仍是红色——!important 生效了，但如果你再加一条：
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
立即学习“前端免费学习笔记（深入）”；
#profile .card { color: green !important; }
绿色就会覆盖红色，因为两个 !important 之间，还是要比原始选择器权重：(0,1,1,0) > (0,0,1,0)。
-
!important不能跨来源翻盘：用户样式里的!important仍可能被作者样式里的!important压制 - 内联样式自带隐式
!important效果，style="color: black"的权重是(1,0,0,0)，比任何外部!important都高 - 滥用会导致后续覆盖越来越重，最后不得不写
#app #main #content .item:hover这种反模式
为什么 div p span 和 .wrapper span 可能结果相反？
后代选择器数量不影响权重，只看类型。前者三个元素选择器：(0,0,0,3)；后者一个类 + 一个元素：(0,0,1,1)。虽然写得长，但 c=1 直接碾压 d=3。
- 组合器（
>、+、~）完全不参与计算，删掉它们不影响优先级 - 通配符
*权重为(0,0,0,0)，和继承来的样式一样，基本没存在感 - 伪元素
::before和标签同级，button::after是(0,0,0,2)，不是特殊加分项
真正容易被忽略的，是权重比较的“按位”逻辑——它不加总，不进位，更不看长度或位置。你改一行 CSS 却没生效，大概率不是浏览器 bug，而是 b 位差了 1。
