| @import | link | |
|---|---|---|
| 从属关系区别 | 是CSS提供的语法规则，只有带入样式表的作用 | link是HTML提供的标签，不仅可以加载CSS文件，还可以定义RSS,REL链接属性等 |
| 加载顺序区别 | 同时加载 | |
| 兼容性区别 | 是CSS2.1才有的语法，因此只可以在IE5+才能识别 | 不存在兼容性问题 |
| DOM可控性区别 | 由于DOM是基于文档的，因此无法使用@import的方式插入样式 | 可以通过JS操作DOM,插入link标签来改变样式 |
| 权重区别 | 小 | 大 |
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM
权重是指选择器的优先级，但目前没有充分的证据表明link与@import权重大小
总结：强烈推荐使用link标签,慎用@import方式
这样可以避免考虑@import的语法规则和注意事项，避免产生资源文件下载顺序混乱和http请求过多的烦恼
<link rel="stylesheet" href="yellow.css">