选择器权重是CSS特异性规则，以三元组(a,b,c)表示：a为内联样式数、b为ID数、c为类/属性/伪类数；权重高者生效，而非后写覆盖。
HTML 样式代码本身不直接生效，真正起作用的是 CSS 选择器及其权重规则；没搞懂权重，改样式就像在猜谜——明明写了 color: red，页面却还是黑色。
什么是选择器权重？为什么它比“谁写在后面”更关键
浏览器渲染时，并非简单按 CSS 文件顺序或声明顺序决定样式，而是先计算每个选择器的“特异性（specificity）”，再比大小。权重高者胜出，哪怕它写在前面。
权重不是相加数字，而是一组优先级三元组：(a, b, c)，对应：
-
a：内联样式个数（如style="color:red"→a=1） -
b：ID 选择器个数（如#header→b=1） -
c：类、属性、伪类选择器个数（如.btn、[type="submit"]、:hover→ 各计 1） - 标签名、伪元素（如
div、::before）不计入权重，只影响匹配范围
!important 真的能绕过权重吗？
能，但代价是破坏可维护性。它不是“提高权重”，而是把该声明提升到最高优先级层级，凌驾于所有普通规则之上（包括内联样式），但无法覆盖 JS 设置的 style 属性值。
立即学习“前端免费学习笔记（深入）”；
常见误用场景：
- 为解决一个冲突临时加
!important，结果后续多人维护时层层叠加，最终满屏!important - 在 CSS-in-JS 或框架组件中滥用，导致主题切换、暗色模式失效
- 以为
!important可以穿透 Shadow DOM —— 实际上不能，需用::part()或::theme()（若支持）
怎么快速判断两个选择器谁赢？
别心算三元组，用工具思维：打开 Chrome DevTools → 选中元素 → 看 Styles 面板里被划掉的样式，鼠标悬停就能看到具体权重值（如 0,1,1,1 表示 1 个 ID + 1 个类 + 1 个标签）。
几个典型对比：
-
div#nav .link:hovervs.menu-item.active→ 前者(0,1,2,1)，后者(0,0,2,0)，前者胜 -
section article p（三个标签）vs.content p→ 后者有类，权重更高（0,0,1,1>0,0,0,3） -
input[type="text"]和.form-control权重相同（都是0,0,1,0），此时才看源码顺序
权重规则本身不难，难的是在嵌套组件、CSS 模块化、第三方库样式共存时保持判断直觉。最常被忽略的其实是“伪类和伪元素的区分”：:nth-child(2) 算 1 个伪类（计入 c），::first-line 是伪元素（不计权），但很多人把双冒号写成单冒号还浑然不觉。
