本文详细探讨了link和@import在前端开发中引入CSS样式的区别，包括从属关系、加载顺序、兼容性、DOM可控性和权重等方面。虽然@import在加载顺序上滞后于link，但在渲染过程中，CSS解析引擎会将其置于顶部，导致后加载的样式可以覆盖先前的，从而解释了为何link引入的样式权重看似高于@import。通过对多个实例的分析，揭示了CSS加载与渲染的内在机制。
关于@import和link引入样式的区别网上有很多种说法。大致有如下几种，不过这其中会有我存疑的地方，我们可以一起来探讨一下。
区别
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方法是基于文档的，无法使用 @import 的方式插入样式。
5.权重区别
link引入的样式权重大于@import引入的样式。（？？？）
我们在网上搜索关于这两者的区别的时候通常会看见有第5条这么一个说法。难道第5条真的是这样吗？有待商榷。
所以这里我们就通过几个demo来验证一下第五条
再验证之前我们先来说说css权重的相关概念：
css的权重指的是选择器的优先级，CSS 选择器的权重高，即选择器的优先级高。
css的优先级表现在，对同一个html元素设置元素的时候，不同选择器的优先级不同，优先级低的样式将会被优先极高的样式所覆盖。
css的权重优先级表现为：
!important > 行内样式 > ID > 类、伪类、属性 > 标签名 > 继承 > 通配符
为了便于理解权重的计算方式，我们按以下方式进行数值假设分析：
demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
&
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
