link和@import区别

  就结论而言,强烈建议使用 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引入的样式,会被层叠掉。其虽然后被加载,却会在加载完毕后置于样式表顶部,最终渲染时会被下面的同名样式层叠。  

猜你喜欢

转载自www.cnblogs.com/hope192168/p/12001336.html