后引入的CSS文件仅在来源、重要性和特异性相同时才覆盖先引入的同名样式；内联样式＞块＞外部CSS；!important提升单个声明的重要性层级；特异性按a,b,c,d四位计算，决定多数覆盖关系。
为什么后引入的CSS文件能覆盖先引入的同名样式
CSS层叠（Cascading）不是“谁写在后面谁赢”的简单顺序战，而是由来源、重要性、特异性、声明顺序
四个维度共同决定的。引入顺序只在「来源相同、重要性相同、特异性相等」时才起最终裁决作用——这正是日常开发中最常踩坑的盲区。
比如两个 引入的外部样式表，若都定义了 .btn { color: red; }，后加载的会生效；但若前一个用了 !important 或内联样式，顺序就失效了。
内联样式、
三者属于不同「来源（origin）」，按权重从高到低排列为：内联样式 > 块 > 外部CSS文件。这个层级关系比引入顺序更刚性，无法靠位置逆转。
常见误操作：
- 在
里用写了.header { margin: 0; }，又在 body 底部用引入同名规则——仍会胜出 - 给元素加了
style="color: blue;"，再在外部CSS里写.text { color: red; }，蓝色不会被覆盖
!important 是如何打破常规层叠逻辑的
!important 不是“加强版样式”，而是把该声明提升到更高一级的「重要性（importance）」层，直接跳过特异性与顺序比较。它只对单个声明生效，且不能用于 @keyframes 或 CSS 变量定义中。
关键限制：
- 多个
!important同时存在时，仍需比特异性——#nav .item:hover { color: red !important; }比.item { color: blue !important; }更强 - 用户自定义样式（如浏览器插件注入）带
!important，可覆盖页面所有普通声明，开发者几乎无法反制 - 现代框架（如 Vue 的
）默认不支持!important提升作用域外样式，容易误判效果
特异性（specificity）计算错误导致的“明明写在后面却不生效”
这是最隐蔽的问题：你以为后写的样式该赢，但它特异性太低，连参与“顺序决胜”的资格都没有。浏览器按四位数（a,b,c,d）计算特异性：
a = 内联样式数（style=""）b = ID 选择器数（#header）c = 类/属性/伪类数（.btn, [type="submit"], :hover）d = 元素/伪元素数（div, ::before）
例如：
.content a { color: green; } /* c=1, d=1 → 0,0,1,1 */
#main .content a { color: red; } /* b=1, c=1, d=1 → 0,1,1,1 */
即使绿色规则写在红色之后，红色仍生效——因为特异性碾压。
调试建议：
- Chrome DevTools 的 Styles 面板里，被划掉的样式旁会显示「specificity」数值，点开可看详细构成
- 避免用
div.header ul li a这类过度具体的选择器，它特异性高但复用性差，后期难覆盖 - 用
[data-override]属性选择器替代冗长嵌套，既可控又易维护
真正决定样式的从来不是文件引入顺序，而是那一行声明在整套层叠规则里的综合得分。顺序只是最后关头的“加时赛”，别把它当主力裁判。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
