在css中@import优先级与顺序说明_技术学堂

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

发布时间：2025-10-25 20:43

发布者：网络

浏览次数：

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

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

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

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

例如：

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

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

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

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

小爱开放平台

小米旗下小爱开放平台

291

查看详情

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

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

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

例如：

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

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

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

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