在css中@import优先级与顺序说明

@import的优先级由加载顺序和选择器权重共同决定，后导入的样式在同等权重下覆盖先导入的，且@import必须位于CSS文件开头，否则无效。

在CSS中，@import 用于引入外部样式表文件。它的优先级和作用方式与普通样式规则的加载顺序密切相关，但需要注意的是，@import 的优先级并不由它自身决定，而是遵循CSS的层叠规则（cascading rules），即后来者覆盖前者。

1. @import 的位置决定加载顺序

@import 必须写在 CSS 文件或 style 标签的最前面，否则会被忽略。所有 @import 规则必须出现在任何其他类型的规则之前（如 class、id 选择器等）。

@import url("reset.css");
@import url("theme.css");
<p>body { margin: 0; }</p>

上面代码是合法的。如果把 body 规则写在 @import 前面，后面的 @import 就会失效。

立即学习“前端免费学习笔记（深入）”；

2. 后导入的样式会覆盖先导入的（层叠原则）

CSS 的核心机制之一是“后定义的规则覆盖先定义的”，这个规则同样适用于 @import。

• 如果 reset.css 定义了 h1 { color: black; }
• 而 theme.css 定义了 h1 { color: blue; }
• 那么最终 h1 的颜色为 blue，因为 theme.css 是后导入的

这说明：导入顺序影响样式的最终表现，越靠后的导入具有更高的实际优先级（在同等选择器权重下）。

先见AI

数据为基，先见未见

95

查看详情

3. 与 link 标签的比较

HTML 中使用 <link> 引入 CSS 和 CSS 内部使用 @import 效果类似，但加载时机不同：

• <link> 在页面加载时并行请求，性能更好
• @import 是在 CSS 文件解析时才发起请求，可能造成样式延迟

关于优先级：如果一个样式在 @import 导入的文件中定义，另一个在 <link> 引入的文件中定义，最终谁生效取决于它们的加载顺序和选择器权重，而不是引入方式。

4. 选择器权重仍起决定作用

即使某个样式来自后导入的文件，如果前一个文件中的规则选择器权重更高，仍然会生效。

/* a.css */
#header nav { color: red; }
<p>/<em> b.css - 被后导入 </em>/
nav { color: green; }</p>

尽管 b.css 后加载，但由于 #header nav 权重更高，文字仍显示为红色。

基本上就这些。@import 的“优先级”本质是顺序 + 权重的综合结果，不复杂但容易忽略细节。

以上就是在css中@import优先级与顺序说明的详细内容，更多请关注php中文网其它相关文章！