link与@import的区别
link与@import的区别
link与@import的区别本文讲解在页面引用的时候，link与@import在页面引用的时候的区别。区别一：link先与@import存在，对于一个页面先加载link然后加载@import；
区别二：link的兼容性更好，在ie5的浏览器中，@import就是不可以使用的；代码演示首先是文件结构
index.html代码代码语言：javascript代码运行
link与@import的区别
本文讲解在页面引用的时候，link与@import在页面引用的时候的区别。
区别一：link先与@import存在，对于一个页面先加载link然后加载@import； 区别二：link的兼容性更好，在ie5的浏览器中，@import就是不可以使用的；
代码演示
首先是文件结构
index.html代码
代码语言：javascript代码运行次数：0运行复制<!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="./">
</head>
<body>
<div>111</div>
<p>222</p>
</body>
</html>代码
代码语言：javascript代码运行次数：0运行复制div{
background: red;
}
@import url(./);代码
p{
background: blue;
}运行结果 在这个演示代码中，我用@import引入代码到中，然后在index.html中使用link引入代码，然后我们可以看见的是代码没有在网页中起效。 这是因为@import代码写在后面的link所包含的样式的后面的缘故，现在我们重新编写一下，就可以看出区别了。
重新编写的文件。
代码语言：javascript代码运行次数：0运行复制@import url(./);
div{
background: red;
}运行结果 可以看出来的是我们从写编写之后，把这个@import的写在了最前面，这样的结果是，可以使得中的内容成功加载出来。
#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格
上传时间： 2025-07-19 11:33:36
上一篇：字符串删减(蓝桥杯每日一题)
下一篇：JS如何让数组中的元素随机展示
推荐阅读
| 留言与评论（共有 5 条评论） |
| 本站网友 vn | 24分钟前 发表 |
| blue; }运行结果 在这个演示代码中 | |
| 本站网友 好孕汤 | 22分钟前 发表 |
| 现在我们重新编写一下 | |
| 本站网友 脱毛膏什么牌子好 | 4分钟前 发表 |
| blue; }运行结果 在这个演示代码中 | |
| 本站网友 喝蜂蜜能减肥吗 | 0秒前 发表 |
| 可以使得中的内容成功加载出来 | |