link与@import的区别
本文讲解在页面引用的时候，link与@import在页面引用的时候的区别。
区别一：link先与@import存在，对于一个页面先加载link然后加载@import；
区别二：link的兼容性更好，在ie5的浏览器中，@import就是不可以使用的；
代码演示
首先是文件结构
index.html代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" type="text/css" href="./index.css"> </head> <body> <div>111</div> <p>222</p> </body> </html>
index.css代码
div{ background: red; } @import url(./index2.css);
index2.css代码 p{ background: blue; }
运行结果
在这个演示代码中，我用@import引入index2.css代码到index.css中，然后在index.html中使用link引入index.css代码，然后我们可以看见的是index2.css代码没有在网页中起效。
这是因为@import代码写在后面的link所包含的样式的后面的缘故，现在我们重新编写一下index.css，就可以看出区别了。
重新编写的index.css文件。
@import url(./index2.css); div{ background: red; }
运行结果
可以看出来的是我们从写编写index.css之后，把这个@import的写在了最前面，这样的结果是，可以使得index2.css中的内容成功加载出来。
