css引入方式link与import的区别
1、link属于html标签，而@import是css提供的，只能加载CSS
2、加载顺序，link在页面加载时被加载，@import在页面加载完之后再加载
3、link是html标签，因此没有兼容性，而@import只有IE5以上才能识别
4、link是可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式
css引入方式可分为link引入与@import引入，下面来分析二者的权重问题
1、首先是link引入的 link.css 文件
button{
background: green;
}
2、接下来是import引入的import.css文件
button{
background: red;
}
3、下面测试link引入方式在前，import方式在后
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" rev="stylesheet" href="./link.css" type="text/css" >
<style type="text/css" >
@import url("./import.css");
</style>
</head>
<body>
<button type="button">测试link与@import权重问题</button>
</body>
</html>
结果：按钮为红色，代表import.css样式覆盖了link.css
4、下面测试import方式在前，link方式在后
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css" >
@import url("./import.css");
</style>
<link rel="stylesheet" rev="stylesheet" href="./link.css" type="text/css" >
</head>
<body>
<button type="button">测试link与@import权重问题</button>
</body>
</html>
结果：按钮为绿色，代表link.css样式覆盖了import.css样式
结论：import与link样式权重主要取决于代码加载顺序，后面样式覆盖前面样式。
注意：一般尽量避免使用import方式，且import方式引入放在最下方，用于页面美化
