CSS选择器优先级由(a,b,c,d)权重决定，a为内联样式、b为ID数、c为类/属性/伪类数、d为标签/伪元素数；高位相等才比较低位，!important仅提升声明优先级而非权重。
CSS选择器优先级不是“谁写在后面就赢”，而是由可计算的权重分值决定；只要算出 (a, b, c, d)，冲突根源立刻清晰。
怎么快速算出选择器的 (a, b, c, d) 权重
打开浏览器 DevTools → 选中元素 → 点“Computed”面板 → 找到被划掉的样式，右侧会显示 specificity 值（如 0,1,1,2）。但更可靠的是自己手算，避免被工具误导：
-
a：只看有没有style=""属性，有则为1，否则0 -
b：数 ID 选择器个数，#header #nav是2，不是1 -
c：类名、[attr]、:hover、:not(.disabled)都算 —— 注意：:not()括号里内容参与计分 -
d：标签名、::before等都算，div ul li a就是4
示例：#main .nav[data-active] a:hover → b=1, c=2（.nav + [data-active] + :hover 共 3 个？错，:hover 是伪类，算 1 个；[data-active] 是属性选择器，算 1 个；.nav 是类，再加 1 个 → c=3），d=1（只有 a）→ 权重是 (0,1,3,1)。
为什么 .btn.btn-primary 覆盖不了 #form .btn
表面都是“两个类”，但实际权重天差地别：.btn.btn-primary 是 (0,0,2,0)，而 #form .btn 是 (0,1,1,0)。比较时先看 b 位：1 > 0，直接胜出，根本不会比后面的 c。
这类问题常见于组件库覆盖自定义样式失败，根源常是第三方用了 ID 或高权重组合。排查时不要盯着“类多了没”，要盯 b 是否存在 —— 只要出现一个 #，基本就宣告低权重选择器出局。
容易踩的坑：
- 以为
.a.b.c.d.e（5 个类）能压过#container .item—— 实际c=5vsb=1,c=1，高位b已决胜负 - 用
div.header替代.header，多加 1 个d，毫无必要还增加维护成本 - 嵌套写成
section > article div p span em，d=6，看似“精准”，实则脆弱且易被更简洁的.highlight（c=1）反超
!important 不是解药，而是信号灯
!important 的优先级高于内联样式，但它不改变选择器本身的权重，只是给某条声明“开特权通道”。滥用会导致：
- 后续想覆盖它，必须也加
!important，形成恶性循环 - DevTools 中所有带
!important的样式都会标黄，干扰真实权重判断 - 无法通过调整选择器结构来修复，等于放弃 CSS 的层叠设计哲学
真正该做的是：把 !important 当作调试标记 —— 发现它频繁出现，说明 HTML 结构或 CSS 组织方式出了问题。比如 .modal .close:hover 总被覆盖，与其加 !important，不如把 .close 改成 .modal-close，让语义和权重对齐。
权重相同时，后写的才生效，但别依赖它
当两个选择器权重完全一样（如 .btn 和 .primary 都是 (0,0,1,0)），浏览器按源顺序取后定义的规则。这看似简单，但工程中极易失控：
- CSS 文件加载顺序受构建工具影响（如 Webpack 的
import顺序、@import位置） - 第三方库可能动态注入样式，你写的“后面”未必真在 DOM 样式表末尾
- 多人协作时，没人能记住谁在哪改了哪一行
所以，靠“写在后面”覆盖，只适合临时调试。长期方案是统一入口（如所有项目样式从 index.css 单点引入）、用 BEM 规范命名（.btn--primary 天然隔离权重）、或上 CSS Modules —— 让类名自动带哈希，从根源消灭冲突。
最常被忽略的一点：权重计算不进位，也不求和。10 个类 ≠ 1 个 ID；3 个伪类 + 5 个标签 ≠ 8 分。它是一台四位拨号机，高位卡死，低位再努力也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
