link与@import的区别
link与@import的区别
GeekLiHua
发布于 2025-01-21 21:21:08
发布于 2025-01-21 21:21:08
代码可运行
运行总次数：0
代码可运行
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中的内容成功加载出来。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2025-01-20，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
