权重相同时，后声明的规则生效；该顺序指解析时的文本位置，如后写的<style>规则或靠后的<link>中同权重样式胜出，而行内样式不参与此顺序竞争。
权重相同时，谁生效取决于声明顺序
当两个选择器的权重完全一样（比如都是 .btn 和 .primary，权重都是 0,0,1,0），浏览器不会随机选一个，而是按 CSS 规则在文档中「出现的先后顺序」决定——后写的覆盖先写的。
这个“先后”不是指文件加载时间，而是指解析时的文本位置：
-
<style>块里写在后面的规则胜出 - 多个
<link>引入的 CSS，靠后的<link>里的同权重规则胜出 - 内联样式
style="..."是独立层级，不参与这个顺序竞争（它权重是 1,0,0,0，天然最高） -
@import声明即使写在<style>开头，实际解析也晚于所有<link>，所以它的同权重规则常被误以为“靠后却无效”
常见误判：以为 .btn 和 button.btn 权重相同
很多人看到 .btn 和 button.btn 都设置了 color，就默认后写的一定生效，结果发现没覆盖——其实是因为权重根本不同。
.btn 权重是 0,0,1,0；button.btn 是 0,0,2,0（1 个类 + 1 个元素），后者更高。哪怕 .btn 写在后面，也赢不了。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：
- 用开发者工具检查时，只看「是否被划掉」，不点开「computed」看 actual specificity 值
- 把
div .class和.class当作同权重，其实前者多一个空格+元素选择器，权重高一级 - 在 Vue/React 的 scoped CSS 或 CSS-in-JS 里，自动加属性选择器（如
[data-v-xxx]），悄悄抬高了权重，导致外部样式失效
!important 不改变权重，只豁免单条声明
!important 不会让选择器权重变高，它只是让这条声明“跳过权重比较”，直接赢。但要注意：
- 如果两条都带
!important，还是得比权重 —— 权重高的那个!important生效 -
!important只作用于当前属性，比如color: red !important;不影响font-size的优先级 - 用户自定义样式（如浏览器插件注入）带
!important，可能压过你页面的所有!important
继承样式永远最低，连通配符都不如
父元素设了 font-family: sans-serif;，子元素没写任何字体相关样式，就会继承。但这种继承来的值，权重是 0,0,0,0 —— 比 * 还低，更别说和类、ID 比了。
这意味着只要子元素有任何显式声明（哪怕只是 p { } 这种空规则），继承就立刻失效。
真正容易被忽略的是：CSS 自定义属性（--color）的继承行为也遵循这套权重逻辑，但变量本身不参与计算 —— 赋值时的声明才参与。
