link与@import的区别

Dear 丶 2024-03-26 04:15 55阅读 0赞

## link与@import的区别 ##

本文讲解在页面引用的时候，link与@import在页面引用的时候的区别。

区别一：link先与@import存在，对于一个页面先加载link然后加载@import；  
区别二：link的兼容性更好，在ie5的浏览器中，@import就是不可以使用的；

**代码演示**

首先是文件结构  
![在这里插入图片描述][247f25a65937426693f550ab1bfd29c6.png]

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，就可以看出区别了。  
![在这里插入图片描述][2e05315255d149f0be432192b3d83f39.png]

重新编写的index.css文件。

@import url(./index2.css);
    div{
        
        background: red;
    }

运行结果  
可以看出来的是我们从写编写index.css之后，把这个@import的写在了最前面，这样的结果是，可以使得index2.css中的内容成功加载出来。  
![在这里插入图片描述][881d781d0a3a4ac6b0e2d25c51550bb2.png]

[247f25a65937426693f550ab1bfd29c6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/0565da5fd1ee4e009b43b6b17dd48716.png
[2e05315255d149f0be432192b3d83f39.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/d3af583b48644e5eb76fd40c17c750b0.png
[881d781d0a3a4ac6b0e2d25c51550bb2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/62e2d884f98e4c5e81c2c00c9e67c3fd.png