[email protected]区别 ，相信小伙伴们对这个话题应该有所关注吧，[email protected] 的相关资料，希望小伙伴们看了有所帮助。
最近在做知识体系的复盘，[email protected][email protected]�种，不过这其中会有我存疑的地方，我们可以一起来探讨一下。
区别1.从属关系区别@import是 css 提供的语法规则，只有导入样式表的作用；link是html提供的标签，不仅可以加载 css 文件，还可以定义 RSS、rel 连接属性等。
2.加载顺序区别加载页面时，link标签引入的 css 被同时加载；@import 引入的 css 将在页面加载完毕后被加载。
3.兼容性区别@import是 css2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 html 元素，不存在兼容性问题。
4.DOM可控性区别可以通过 js 操作 DOM ，插入link标签来改变样式；由于DOM方法是基于文档的，[email protected] 的方式插入样式。
5.权重区别[email protected]（？？？）
[email protected]�[email protected]？有待商榷。
所以这里我们就通过几个demo来验证一下第五条
再验证之前我们先来说说css权重的相关概念：
css的权重指的是选择器的优先级，css 选择器的权重高，即选择器的优先级高。
css的优先级表现在，对同一个html元素设置元素的时候，不同选择器的优先级不同，优先级低的样式将会被优先极高的样式所覆盖。
css的权重优先级表现为：
!important > 行内样式 > ID > 类、伪类、属性 > 标签名 > 继承 > 通配符
为了便于理解权重的计算方式，我们按以下方式进行数值假设分析：
选择器权重通配符0标签1类/伪类/属性10ID100行内样式1000important无穷大demo:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>document</title> <style type="text/css"> #myid { background-color: pink; } #divid .myspan input { background-color: yellow; } input[type="button"] { color: white !important; } input.myclass { 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>根据上述计算得知：这个按钮应该是黄色背景，白色字体。
这里又回到我们的主题：[email protected]？
难道引入css的方式也会有权重吗？
上demo：
div { background-color: green; border: 3px solid red;}div { background-color: yellow; border: 3px solid black;[email protected] 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="http://www.aidi.net.cn/article/detial/5539/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="http://www.aidi.net.cn/article/detial/5539/yellow.css"></head><body> <div style="width: 50px; height: 50px;"></div> <!-- 盒子为黄色背景，黑色边框，即yellow.css生效 --></body></html>对比1和2两个例子，[email protected]重方面概念，只是单纯的展示出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="http://www.aidi.net.cn/article/detial/5539/blue.css"></head><body> <div style="width: 50px; height: 50px;"></div> <!-- 盒子为蓝色背景，红色边框，即green.css已生效，但背景色被blue.css层叠为蓝色 --></body></html>分析实例3和实例4的结果可知：
对于实例3，我们看到红色边框，[email protected]，但其背景样式被内联样式中的粉色背景层叠掉，这个现象表明，@import不只是如我们看到的那样，处于内联样式顶部，其被引入的样式，在结构上，也确实是被置于内联样式之前，所以内联样式才能够层叠掉它。
同理，实例4中，在link标签引入的blue.css文件内，[email protected]，红色边框依然可以证明，green.css已经生效，但其背景样式被blue.css本身的蓝色背景层叠掉，@import引入的样式在blue.css中也是被置于它本身样式之前的。
[email protected]引入的样式这么说是不太合理的。
疑点？[email protected]，在加载页面的时候，[email protected]吗？[email protected]啊？
首先我们来回顾一下关于浏览器执行过程的一些概念：
加载：根据请求的url进行域名解析，然后向服务器发送请求，接收响应文件（如HTML、CSS、js、图片等）。
解析：对加载到的资源（HTML、CSS、js等）进行语法解析，构建响应的内部数据结构（如HTML的DOM树，js对象的属性表，css样式规则等）。
渲染：构建渲染树，对各个元素进行位置计算、样式计算等，然后根据渲染书完成页面的布局及绘制的过程（产生页面的元素）。
所以根据我们上述的浏览器执行过程的理解以后，我们我继续提出疑问：
[email protected]，[email protected]？
实际上，浏览器渲染的动作一般会执行多次的。最后一次渲染，一定是基于之前加载过的所有样式整合后渲染树进行绘制页面的，已经被渲染过的页面元素，也会被重新渲染。
[email protected] CSS 文件的方式理解成一种替换，CSS 解析引擎在对一个 CSS 文件进行解析时，[email protected]，[email protected] CSS 文件中的全部样式。
[email protected]，会被层叠掉了。其虽然后被加载，却会在加载完毕后置于样式表顶部，最终渲染时自然会被下面的同名样式层叠。
来源：爱蒂网
