link和@import的区别

外部引入 CSS 有2种方式，link 和 @import。就结论而言，强烈建议使用 link ，慎用 @import 方式。

1. 从属关系不同

link 是 HTML 提供的标签，不仅可以加载 CSS 文件，还可以定义 rel 、 RSS 属性等

<link rel="stylesheet" href="style.css">

@import 是 CSS 提供的语法规则，只有导入样式表的作用（加载CSS）

<style>
   @import url("theme.css");

   body {
       font-size: 20px;
   }
</style>

---

2. 加载顺序不同

link 标签引入的 CSS ，在加载页面时会被同时加载

@import 引入的 CSS ，将在页面加载完毕后才会被加载

---

3. 兼容性不同

link 标签作为 HTML 元素，不存在兼容性问题

@import 是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别

---

4. DOM控制性不同

link 支持使用 JS 控制 DOM 去改变样式

由于 DOM 方法是基于文档的，无法使用@import 的方式插入样式

---

5. 权重不同（有争议）

link 引入的样式权重大于 @import 引入的样式