难度级别：初级及以上 提问概率：55%
link是我们非常熟悉的一个HTML标签，用于引入CSS文件，而@import则存在于CSS文件内部，用于再次引入其他的CSS文件。所以很显然，执行顺序上，link标签会随着HTML文档加载，开始触发下载CSS文件的操作。而@import引入的CSS附属文件，则需要当前宿主CSS文件被下载后、被浏览器解析后、执行到这一行的时候，才能触发附属CSS文件的下载。同时这也是一个很好的优化手段，可以使一些首屏非必要的CSS文件采用@import方式引入。
但需要注意的是，link引入的CSS样式在权重上，要高于@import引入的CSS样式。示例代码如下
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>样式引入</title>
<link rel="stylesheet" href="a.css">
</head>
<body>
<div id="submitBtn">引入示例</div>
</body>
</html>
a.css代码：
#submitBtn {
width: 200px;
height: 200px;
border: 1px solid red;
}
@import url(b.css);
b.css代码：
#submitBtn {
width: 200px;
height: 200px;
border: 10px solid red;
}
代码效果如图
通常都是将@import引入代码放于CSS文件顶部的，但通过以上示例代码可知，在a.css文件中，即便@import引入b.css文件代码位于样式设置下方以后，div边框样式的设置，在权重方面仍然是link引入文件比较高。
刷题思考
在大型项目中，会经常使用@import引入CSS文件，这道题除了考察link标签与@import的区别外，在日常开发工作中，二者在权重方面的问题也是很值得关注的。除了知识点外，这道题也很好的考察了求职者工作经验的丰富程度。
类似考点
看完这道题，面试官可能会问类似的题目，比如请你说出引入CSS代码的方式都有哪些？那么请说一下各种引入方式对权重有什么影响吗？
373
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
