link和@import区别

Posted 2020-11-23 hope192168

　　就结论而言，强烈建议使用 link标签，慎用 @import方式.

这样就可以避免考虑 @import 的 语法规范和注意事项，避免产生资源文件下载顺序混乱和http请求过多的烦恼。

 

区别：

1.从属关系区别

　　　　@import 是CSS提供的语法规则，只有导入样式表的作用； link 是html提供的标签，不仅可以加载CSS文件，还可以定义RSS，rel连接属性等。

　　　　link真正的作用是：链入一个文档，通过 rel 属性 声明链入的文档与当前文档之间的关系。

2.加载顺序区别

　　　　加载页面时， link标签引入的css被同时加载；而@import 引入的css将在页面加载完毕后进行加载　

3.兼容性区别

　　　　@import是CSS2.1才有的语法，故只在IE5+ 才能识别；而link是HTML标签，不存在兼容性问题。

 

4.DOM可控制性区别

　　　　　　通过JS操作DOM，插入link标签来改变样式；由于DOM方法是基于文档的，无法使用@import的方式插入样式。

5.权重区别（https://www.cnblogs.com/my--sunshine/p/6872224.html）老哥这里进行了深入思考，连接这里

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

 

  　　PS：@import引入的样式，会被层叠掉。其虽然后被加载，却会在加载完毕后置于样式表顶部，最终渲染时会被下面的同名样式层叠。