@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 是后导入的
这说明：导入顺序影响样式的最终表现，越靠后的导入具有更高的实际优先级（在同等选择器权重下）。
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 的“优先级”本质是顺序 + 权重的综合结果，不复杂但容易忽略细节。
