CSS样式覆盖问题经常被归因于选择器权重，但标签的引入顺序同样是决定性因素之一。两个来源对同一元素声明相同属性时，如果选择器权重一致，后出现的样式会覆盖先出现的样式。这个规则在link标签、style标签以及@import混合使用时表现得非常明显。
一、源顺序：同权重下后出现者生效
CSS规范把每个声明都放进一个层叠上下文里，最终根据来源、选择器权重、作用域和源顺序决定谁胜出。对普通作者样式来说，如果两个规则来自同一来源、选择器权重相同，那么后出现在样式表中的规则会覆盖前面的规则。这里的“后出现”不是文件下载完成的先后，而是浏览器按照HTML文档中style和link标签的位置来排序。
比如页面同时引用了base.css和override.css，两个文件都给h1声明了颜色。在head中先写base.css后写override.css，最终标题显示为override.css里的颜色。反过来则base.css里的颜色被覆盖。这个行为可以通过开发者工具直接观察：被覆盖声明会显示删除线，同时右侧会标出胜出的文件与行号。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>源顺序演示</title> <link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="override.css"> </head> <body> <h1>这段文字的颜色来自后加载的样式</h1> </body> </html>
/* base.css */
h1 {
color: #333333;
}
/* override.css */
h1 {
color: #c00;
}
这里的两个规则都是单一元素选择器，权重均为0,0,1。由于没有更高权重选择器参与，只比较源顺序。默认情况下，override.css排在base.css之后，所以最终文字呈现红色。
二、link与style混用时如何判断先后
link标签和style标签同样参与文档源顺序。浏览器不会因为style是内嵌写法就天然比link优先级高，也不会因为link是外部文件就一定后生效。判断方法非常简单：看它们在HTML源码中的先后位置。位于后面的样式，在同权重条件下覆盖前面出现过的同名声明。
例如常见的做法是把基础主题放在head前部，把页面级覆盖放在后面。如果使用style标签写局部调整，最稳妥的方式是将其放在主题link之后，这样即使选择器权重相同，调整也能生效。
<head>
<link rel="stylesheet" href="theme.css">
<style>
body {
background: #fafafa;
}
</style>
</head>
反过来，如果style放在link之前，theme.css中同名声明会覆盖style中的背景色，导致开发者误以为style没有生效。这类问题常见于使用模板引擎自动注入样式片段时，如果注入位置固定在前部，后续的公共样式就会把它覆盖掉。解决方案是调整注入顺序，或者给局部规则增加更高权重的作用域。
@import也遵循同样的逻辑，但它更特殊：@import必须写在样式表或者style块的最前面，否则会被浏览器忽略。多个@import按书写顺序引入，相当于把对应文件依次插入到当前位置。比如在style顶部先@import reset.css，再@import theme.css，则后者的同权重规则会覆盖前者。由于@import会阻塞渲染且降低加载性能，生产环境建议优先使用link标签。
三、内联样式与!important如何打破标签顺序
内联style属性属于元素级声明，在层叠上高于所有外部样式表。也就是说，即使一个link标签放在HTML最后，只要元素上写了内联style，内联规则通常仍然胜出。比如下面这段代码，标题会显示绿色，而不是外部文件里的红色。
<link rel="stylesheet" href="override.css"> <h1 style="color: green;">标题最终是绿色</h1>
但如果外部样式使用了!important，内联样式也会被反转压制。比如override.css中写成h1 { color: #c00 !important; }，那么此时标题是红色。注意!important的优先级不是无条件的，它同样受源顺序约束：当多个规则都带有!important时，后出现的!important仍然覆盖先出现的!important。
由于!important会破坏正常的可预测性，一旦使用过多，后面几乎只能靠继续加!important来对抗，最终让样式维护变得困难。如果不是为了覆盖第三方框架或独立组件，建议尽量通过调整标签顺序、提高选择器权重或使用CSS变量来处理，而不是直接加!important。
四、实际项目中的顺序管理策略
在不使用CSS Layers的情况下，团队可以把样式文件按照基础、布局、组件、主题、覆盖的顺序引入。基础层负责重置和全局变量，布局层定义栅格和容器，组件层处理按钮、表单等可复用UI，主题层负责颜色、字体等可变配置，最后是页面级覆盖。这样后引入的主题和覆盖规则可以自然覆盖基础层的默认值，而不会互相干扰。
<head> <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="layout.css"> <link rel="stylesheet" href="components.css"> <link rel="stylesheet" href="theme.css"> <link rel="stylesheet" href="custom.css"> </head>
除了依赖物理顺序，现代CSS提供了更明确的层级控制方式，例如@layer规则。通过@layer可以给样式分层，后面的层优先级高于前面的层，而不再取决于选择器权重和文件顺序。使用@layer时，团队可以把第三方库放入低优先层，把自定义样式放入高优先层，从而减少对标签顺序的依赖。不过@layer在老版本浏览器中不生效，是否引入需要根据项目兼容目标决定。
另一个减少顺序敏感性的做法是限制选择器的作用面和权重。BEM命名、CSS Modules、Scoped CSS都可以帮助开发者避免全局冲突。样式覆盖应尽量发生在明确的作用域内，而不是靠堆叠后面的样式。比如给页面容器一个专用类名，再为内部组件写覆盖，比直接修改全局标签样式要安全得多。
还有一点需要特别注意：不要误以为放在后面的选择器一定覆盖前面的。比如前面的#header .title样式权重很高，后面的.title样式即使位置靠后，也无法覆盖它。所以处理覆盖时，应当先判断选择器权重，再考虑位置。