你真的理解@import和link引入样式的区别吗

时间 2019-11-07

标签理解 import link 引入样式区别繁體版

原文原文链接

最近在作知识体系的复盘，在复盘的时候尽量的查漏补缺。关于@import和link引入样式的区别网上有不少种说法。大体有以下几种，不过这其中会有我存疑的地方，咱们能够一块儿来探讨一下。css

区别

1.从属关系区别

@import是 CSS 提供的语法规则，只有导入样式表的做用；link是HTML提供的标签，不只能够加载 CSS 文件，还能够定义 RSS、rel 链接属性等。html

2.加载顺序区别

加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。浏览器

3.兼容性区别

@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签做为 HTML 元素，不存在兼容性问题。bash

4.DOM可控性区别

能够经过 JS 操做 DOM ，插入link标签来改变样式；因为DOM方法是基于文档的，没法使用@import的方式插入样式。服务器

5.权重区别

link引入的样式权重大于@import引入的样式。（？？？）数据结构

咱们在网上搜索关于这二者的区别的时候一般会看见有第5条这么一个说法。难道第5条真的是这样吗？有待商榷。布局

因此这里咱们就经过几个demo来验证一下第五条字体

再验证以前咱们先来讲说css权重的相关概念：url

css的权重指的是选择器的优先级，CSS 选择器的权重高，即选择器的优先级高。spa

css的优先级表如今，对同一个html元素设置元素的时候，不一样选择器的优先级不一样，优先级低的样式将会被优先极高的样式所覆盖。

css的权重优先级表现为：

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

为了便于理解权重的计算方式，咱们按如下方式进行数值假设分析：

选择器	权重
通配符	0
标签	1
类/伪类/属性	10
ID	100
行内样式	1000
important	无穷大

demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #myid { /* id选择器权重为100 */
            background-color: pink;
        }
        #divid .myspan input { /* 权重为 100 + 10 + 1 = 111 */
            background-color: yellow;
        }
        input[type="button"] { /* 权重为 10 */
            color: white !important; /* !important权重为无穷大 */
        }
        input.myclass { /* 此为标签指定式选择器，权重为 1 + 10 = 11 */
            color: black;
        }
    </style>
</head>
<body>
    <div id="divid">
        <span class="myspan">
            <input type="button" id="myid" class="myclass" name="myname"
                value="点我" style=" color: green;">
                <!-- style样式的权重为1000 -->
        </span>
    </div>
</body>
</html>

根据上述计算得知：这个按钮应该是黄色背景，白色字体。

这里又回到咱们的主题：link引入的样式权重真的大于@import吗？

难道引入css的方式也会有权重吗？

上demo：

/* green.css */
div {
    background-color: green;
    border: 3px solid red;
}

/* yellow.css */
div {
    background-color: yellow;
    border: 3px solid black;
}

/* blue.css */
@import url("green.css");
div{
    background-color: blue;
}

eg1）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 实例1. link标签引入yellow.css，内联样式引入green.css -->
    <link rel="stylesheet" href="yellow.css">
    <style type="text/css">
        @import url("green.css");
    </style>
</head>
<body>
    <div style="width: 50px; height: 50px;"></div>
    <!-- 盒子为，绿色背景，红色边框，即green.css生效 -->
</body>
</html>

效果：

eg2）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 实例2. 内联样式引入green.css，link标签引入yellow.css -->
    <style type="text/css">
        @import url("green.css");
    </style>
    <link rel="stylesheet" href="yellow.css">
</head>
<body>
    <div style="width: 50px; height: 50px;"></div>
    <!-- 盒子为黄色背景，黑色边框，即yellow.css生效 -->
</body>
</html>

效果：

对比1和2两个例子，咱们发现link和@import这两种引入css的方式并无权重方面概念，只是单纯的展现出css的层叠行罢了。即写在后边都样式会覆盖前面的样式。

eg3）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 实例3. 内联样式引入green.css，内联样式中设置粉色背景 -->
    <style type="text/css">
        @import url("green.css");
        div {
            background-color: pink;
        }
    </style>
</head>
<body>
    <div style="width: 50px; height: 50px;"></div>
    <!-- 盒子为粉色背景，红色边框，即green.css已生效，但背景色被内联样式层叠为粉色 -->
</body>
</html>

效果：

eg4）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 实例4. link标签引入blue.css，blue.css中引入green.css -->
    <link rel="stylesheet" href="blue.css">
</head>
<body>
    <div style="width: 50px; height: 50px;"></div>
    <!-- 盒子为蓝色背景，红色边框，即green.css已生效，但背景色被blue.css层叠为蓝色 -->
</body>
</html>

效果：

分析实例3和实例4的结果可知：

对于实例3，咱们看到红色边框，证实内联样式中使用@import引入的green.css已经生效，但其背景样式被内联样式中的粉色背景层叠掉，这个现象代表，@import不仅是如咱们看到的那样，处于内联样式顶部，其被引入的样式，在结构上，也确实是被置于内联样式以前，因此内联样式才可以层叠掉它。

同理，实例4中，在link标签引入的blue.css文件内，顶部一样存在@import引入的green.css，红色边框依然能够证实，green.css已经生效，但其背景样式被blue.css自己的蓝色背景层叠掉，@import引入的样式在blue.css中也是被置于它自己样式以前的。

因此由上述实例证实link引入的样式权重大于@import引入的样式这么说是不太合理的。

疑点？

咱们上边也说了关于link和@import的区别，在加载页面的时候，不是说在link引入的css样式的时候会先于@import加载吗？那为啥link引入的样式又会覆盖掉@import引入的样式啊？

首先咱们来回顾一下关于浏览器执行过程的一些概念：

加载： 根据请求的url进行域名解析，而后向服务器发送请求，接收响应文件（如HTML、CSS、JS、图片等）。

解析： 对加载到的资源（HTML、CSS、JS等）进行语法解析，构建响应的内部数据结构（如HTML的DOM树，JS对象的属性表，css样式规则等）。

渲染： 构建渲染树，对各个元素进行位置计算、样式计算等，而后根据渲染书完成页面的布局及绘制的过程（产生页面的元素）。

因此根据咱们上述的浏览器执行过程的理解之后，咱们我继续提出疑问：

link先于@import加载，是否是也先于@import渲染呢？

实际上，浏览器渲染的动做通常会执行屡次的。最后一次渲染，必定是基于以前加载过的全部样式整合后渲染树进行绘制页面的，已经被渲染过的页面元素，也会被从新渲染。

那么咱们就能够把@import这种导入 CSS 文件的方式理解成一种替换，CSS 解析引擎在对一个 CSS 文件进行解析时，如在文件顶部遇到@import，将被替换为该@import导入的 CSS 文件中的所有样式。

终于弄明白为什么@import引入的样式，会被层叠掉了。其虽而后被加载，却会在加载完毕后置于样式表顶部，最终渲染时天然会被下面的同名样式层叠。