CSS中link和@import的使用区别_@import兼容性

CSS中link和@import的使用区别

1、兼容性问题

@import是css2.1引入，只有高版本的IE浏览器支持（大于IE5版本以上的），
link属于html元素不存在兼容问题。

2、加载顺序

@import在页面加载完成后才可以加载css文件，
link因为属于html元素，所以在页面加载时同时加载css文件。

3、从属关系

@import是 是css 的一个标签 ，只有导入样式表的作用,
link是html提供的标签，不仅可以加载 css 文件，还可以定义RSS（RSS教程:） 、rel 连接属性等。

4、引用方式

import进行引用：

<style type="text/css">
        @import url(my.css);
</style>
1
2
3

link进行引用：

<link rel="stylesheet" type="text/css" href="my.css">

1
2

5、DOM可控性

可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。（JavaScript可以获取link标签元素，但获取不到@import，因为@import只是一种CSS语法）。

总结：

@import与link本质区别也是最重要的区别就是它们的从属关系的不同，本质上使用选择差别不大，但为了软件中编辑布局网页html代码，一般使用link，也推荐使用link。