在HTML中，我们经常使用到link标签来引入css样式，同时，我们也可以在css文件中通过 @import 来引入css样式，那么这两个方式有什么区别呢？
![图片[1]-简单阐述一下css中import和link的区别 以及权重大小的区别-一只薛眠羊](https://www.xuemy.cn/wp-content/uploads/2023/04/1-1.webp)
以下内容是chatGPT的一个解释：
CSS中的import和link都是用于引入外部样式表的方式，但有以下区别：
- 页面加载方式：link标签的样式表在页面载入时同时加载，而@import引入的样式表则会在页面加载完成后再加载。
- 浏览器兼容性：@import不被IE5以下的浏览器支持，而link标签无此问题。
- DOM可控性：link标签会产生一个link DOM节点，而@import引入的样式表不会产生DOM节点，所以无法通过JavaScript来控制样式。
- 权重不同：使用@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 |
| ID | 100 |
| 行内样式 | 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的区别 以及权重大小的区别-一只薛眠羊](https://www.xuemy.cn/wp-content/uploads/2023/04/2.webp)
打开页面，观察盒子的样式
因为：@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引入的样式这样的直观效果。
暂无评论内容