link和@import都是外部引入 CSS 有2种方式。
强烈建议使用link标签，慎用@import方式。
区别
1、从属关系区别
@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
2、加载顺序区别
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
3、兼容性区别
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
4、DOM可控性区别
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。
5、**link**标签引入的 CSS 文件中使用**@import**时，相同样式将被该 CSS 文件本身的样式层叠。
总结
@import是依赖css的，存在一定的兼容问题，并且根据浏览器渲染机制来说，他在dom树渲染完成后才会渲染，并且不能被js动态修改。
link兼容性比@import好。
@import适用于引入公共基础样式或第三方样式，link适用于自己写的且需要动态修改的样式。
额外知识CSS权重
CSS 选择器的权重高，即选择器的优先级高。
CSS 的优先级特性表现为，对同一 HTML 元素设置样式时，不同选择器的优先级不同，优先级低的样式将被高优先级的样式层叠掉。
CSS 权重优先级顺序简单表示为：
!important > 行内样式 > ID > 类、伪类、属性 > 标签名 > 继承 > 通配符
为了便于理解权重的计算方式，我们按以下方式进行数值假设分析：
| 选择器 | 权重 |
|---|---|
| 通配符 | 0 |
| 标签 | 1 |
| 类/伪类/属性 | 10 |
| ID | 100 |
| 行内样式 | 1000 |
| important | 1/0(无穷大) |
CSS的层叠性，写在后面的样式，覆盖前面的样式。
