简单阐述一下css中import和link的区别 以及权重大小的区别

在HTML中,我们经常使用到link标签来引入css样式,同时,我们也可以在css文件中通过 @import 来引入css样式,那么这两个方式有什么区别呢?

图片[1]-简单阐述一下css中import和link的区别 以及权重大小的区别-一只薛眠羊

以下内容是chatGPT的一个解释:

CSS中的import和link都是用于引入外部样式表的方式,但有以下区别:

  1. 页面加载方式:link标签的样式表在页面载入时同时加载,而@import引入的样式表则会在页面加载完成后再加载。
  2. 浏览器兼容性:@import不被IE5以下的浏览器支持,而link标签无此问题。
  3. DOM可控性:link标签会产生一个link DOM节点,而@import引入的样式表不会产生DOM节点,所以无法通过JavaScript来控制样式。
  4. 权重不同:使用@import引入的样式表权重低于link标签引入的样式表,这是由于CSS加载顺序的不同导致的。

因此,在实际应用中,如果需要在页面加载时就同时加载样式表并且需要通过JavaScript来控制样式,则应该使用link标签;如果需要控制样式表的加载顺序,或者是需要在特定的情况下才加载某些样式,则可以使用@import。

再补充一点就是:

5. @import是 CSS 提供的语法规则,只有导入样式表的作用;link是HTML提供的标签,不仅可以加载 CSS 文件,还可以定义 RSS、rel 连接属性等。

对于其上提到的5点,除第4点外,应该都好理解,但是对于第4点,为什么@import的权重大于link的权重,或者@import的权重小于link的权重呢?下面北忘山通过一些实例来印证一下:

首先,在css中,权重一般指的是选择器的权重,一般有以下的关系

选择器权重
通配符0
标签1
类/伪类/属性10
ID100
行内样式1000

权重说明

行内样式 > ID > 类、伪类、属性 > 标签名 > 继承 > 通配符

那么这个@import应该放在哪里?

来看几个实例:

对于一个box,我们定义基础的样式和结构如下:

<!--
 * @Description: Import权重问题研究
 * @Version: 1.0
 * @Author: xuemy
 * @Date: 2023-04-01 20:52:23
 * @LastEditors: xuemy
 * @LastEditTime: 2023-04-01 20:53:45
-->
<!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>Import权重问题研究</title>
    <style>
        .box{
            width:100px;
            height: 100px;
            margin: 100px;
        }
    </style>
</head>
<body>
    <div class="box color">

    </div>
</body>
</html>
图片[2]-简单阐述一下css中import和link的区别 以及权重大小的区别-一只薛眠羊

打开页面,观察盒子的样式

因为:@import一定要写在除@charset外的其他任何 CSS 规则之前,如果置于其它位置将会被浏览器忽略,而且,在@import之后如果存在其它样式,则@import之后的分号是必须书写,不可省略的。

所以,在link引入的同一个文件中使用到了@import,则link内部的css权重大于@import中的css权重

接着我们做如下的改变,不在同一个文件中使用import,结构调整为:

    <link rel="stylesheet" href="color.css">
    <style>
        @import url(./red.css);
        .box{
            width:100px;
            height: 100px;
            margin: 100px;
        }
    </style>

但是我们稍作调整,将style放在link的前面

    <style>
        @import url(./red.css);
        .box{
            width:100px;
            height: 100px;
            margin: 100px;
        }
    </style>
    <link rel="stylesheet" href="color.css">

效果又会变为蓝色

所以,在这里,link的权重和@import的权重不存在差异,只是在代码执行上的前后顺序不同而已,后面执行的代码覆盖了之前的样式。

所以对于 link的CSS权重和@import CSS的权重,最终的结论如下:

link标签引入的 CSS 文件中,使用@import时需注意,如果已经存在相同样式,@import引入的这个样式将被该 CSS 文件本身的样式层叠掉,表现出link标签引入的样式权重大于@import引入的样式这样的直观效果。

© 版权声明
THE END
喜欢就支持一下吧
点赞7赞赏 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容