后加载的CSS仅在来源、重要性和特异性相同时覆盖前面的规则；特异性（a,b,c,d）决定参与顺序比较的资格，@layer提供可控分层优先级，!important跳过层叠但受限于作用域和兼容性。
后加载的CSS能覆盖前面的，但只在权重相同时生效
浏览器按 HTML 中 <link> 标签从上到下的顺序解析外部样式表，后加载的规则只有在「来源相同、重要性相同、特异性相等」时，才会覆盖前面的同名声明。这不是“写在后面就赢”，而是层叠（Cascading）机制的最后一道裁决条件。
常见错误现象：
-
button { color: red; }写在main.css里，但页面按钮还是蓝色——大概率是bootstrap.css在它之后引入，且也写了同权重的button规则 - 自己写的
.header { margin: 0; }被划掉，点开发现是被reset.css里的* { margin: 0; }覆盖了——后者虽然权重低（0,0,0,1），但通配符作用范围大，且 reset 文件通常放在最前面，后续没更高权重规则去压它
关键判断点：打开 Chrome DevTools → Elements → 选中元素 → Styles 面板里找被划掉的属性，悬停看提示 “This rule was overridden by …”，它会明确告诉你谁赢了、为什么赢。
特异性计算错误，导致“明明写在后面却不生效”
选择器权重（specificity）是四元组 (a,b,c,d)，决定一条规则有没有资格参与“顺序决胜”。权重不够，连比谁后写的机会都没有。
立即学习“前端免费学习笔记（深入）”；
示例对比：
.card .title { color: green; } /* c=2 → 0,0,2,0 */
#main .card .title { color: red; } /* b=1, c=2 → 0,1,2,0 */即使绿色规则写在红色之后，红色仍生效——因为它的 b 值高一级，权重碾压。
容易踩的坑：
- 误以为
div.header nav ul li a比.nav-link强——其实前者是0,0,1,4，后者是0,0,1,0，确实更强；但若目标规则是#nav .nav-link:hover（0,1,2,0），你再加元素也赢不了 - 用
@import在 CSS 文件里引入其他样式，等于把内容“粘贴”到该行位置，实际解析顺序和 HTML 中<link>的顺序不一致，极易误判 - Vue/React 的
<style scoped>编译后变成.btn[data-v-abc]，权重等同于类选择器，但可能因构建后插入时机靠后而“意外赢过”全局.btn，造成调试困惑
!important 不是加强版样式，而是跳过层叠流程的单声明提升
!important 把该声明提升到更高一级的「重要性」层，直接跳过特异性与顺序比较。但它只对单个声明有效，且不能用于 @keyframes 或 CSS 变量定义中。
关键限制：
-
!important无法跨样式表生效：A.css 里h1 { font-size: 24px !important; }，B.css 稍后加载并写了h1 { font-size: 32px; }，最终显示 32px——因为 B.css 的规则在层叠顺序上更靠后，且没有!important抵消 - 多个
!important同时存在时，仍需比特异性：#nav .item:hover { color: red !important; }比.item { color: blue !important; }更强 - 浏览器插件（如 Dark Reader）注入的带
!important的样式，开发者几乎无法反制
真实场景中，!important 应仅用于紧急修复或覆盖 UA 样式（如某些表单控件），而非日常覆盖逻辑。
现代方案：@layer 是唯一能绕过权重与顺序博弈的可控手段
@layer 提供了显式的优先级分层能力，让开发者可以声明「哪些层应该后应用」，从而彻底摆脱靠调换 <link> 顺序或堆砌选择器来抢权重的原始做法。
典型用法：
@layer reset, base, components, utilities;
@layer base {
body { font-family: sans-serif; }
}
@layer components {
.btn { padding: 0.5rem 1rem; }
}
@layer utilities {
.text-center { text-align: center; }
}注意：后声明的层（如 utilities）优先级更高；未声明顺序的层默认排在最前，优先级最低。
兼容性提醒：
- Chrome 99+、Firefox 97+、Safari 15.4+ 支持，Edge 同步跟进；旧版本需回退到传统顺序管理
-
@layer不能嵌套，也不能和!important混用（语法报错） - 它不改变单条规则的特异性，只是为整组规则设定了一个更高维度的“出场顺序”
真正复杂的地方在于：当项目里同时存在传统引入顺序、scoped 样式、@layer 和第三方插件注入时，层叠层只是新增了一个可预测的控制面，而不是自动消除所有冲突——你得清楚每一层的边界在哪，尤其是动态插入的样式是否进了某一层。
