参考链接

由link和@import的区别引发的CSS渲染杂谈

页面导入样式时，使用link和@import有什么区别？

link 和 @import导入样式

建议使用 link 标签。

区别

从属关系区别

link 是 HTML 提供的标签，不仅可以加载 CSS 文件，还可以引入网站图标或者设置媒体查询；

@import是 CSS 提供的语法规则，只能用来加载 CSS 文件。

加载顺序区别

link 引入的 CSS 文件在页面载入的同时被加载；

@import 引入的 CSS 将在页面完全载入后被加载，在网络较慢情况下一开始会没有 CSS 样式。

DOM 可控性区别

可以通过 JS 操作 DOM ，插入 link 标签来改变样式；

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

其他

@import 一定要写在除 @charset 外的其他任何 CSS 规则之前，如果置于其它位置将会被浏览器忽略。

而且，在 @import 之后如果存在其它样式，则 @import 之后的分号是必须书写，不可省略的。