Question

由link和@import的区别引发的CSS渲染杂谈

Answer 1

区别
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引入的样式。
争议
不知从什么时候开始，当你在网上搜索link和@import的区别时，千篇一律的答案里就悄悄的多了一句“link引入的样式权重大于@import引入的样式”。
但是并没有一份答案，附带着对这句话的任何解释或实例。
这句话究竟是什么意思，该怎么理解呢？
发扬探索精神，我们不妨继续查阅资料。后来发现，还是有不少文章和帖子，对这句话表示质疑，进而自己写了 demo 去验证，验证的结果，确实无法与这句话相吻合。
而且，笔者也并未发现能清楚、正确、有理有据的解释这个结论到底对，还是不对的文章。
那么这个结论，最初是从哪里来的，可能已经无从考证了。
换个思维方式，不去争辩它的对错了，探索未果，我们就从这个结论的核心关键词“权重”出发，去研究它。
说到“权重”，有必要再解释一下：CSS 中的权重，指的是选择器的优先级。
CSS 选择器的权重高，即选择器的优先级高。
CSS 的优先级特性表现为，对同一 HTML 元素设置样式时，不同选择器的优先级不同，优先级低的样式将被高优先级的样式层叠掉。
CSS 权重优先级顺序简单表示为：
!important > 行内样式 > ID > 类、伪类、属性 > 标签名 > 继承 > 通配符