引入CSS文件的@import与link的权重分析

我很少在CSS用到@import这个标签，最近看到一句话“link方式的样式的权重 高于@import的权重”，感觉不太对，@import只是一个引入外部文件而已，怎么会有高于link的权重呢？于是我比较懒，直接在一个静态页面里面测试了一下，分别把@import的样式放置在link的前面和后面测试，结果发现前面的被后面的link所覆盖，也就是说这个说法是错误的。

因而得出结论（只考虑html中样式文件的优先级）：

1. 当@import与内联样式一起时，内联样式>导入样式
2. 除了第一种情况，其它时候以样式加载顺序为参考，后加载的优先级越高（最近优先原则）

最后，其实这种@import文件导入的方式已经很少用了，个人建议用link方式。

原因是link载入时是和HTML的载入同步加载的，而@import则是在页面内容载入完成之后再引用的。如果网速慢的话，可能会导致页面的样式混乱。

另外使用@import时要注意添加地方，在CSS手册中提到：

1. 该规则必须在样式表头部最先声明。并且其后的分号是必需的，如果省略了此分号，外部样式表将无法正确导入，并会生成错误信息。
2. IE使用@import无法引入超过35条的样式表。

转载于:https://www.cnblogs.com/gyjWEB/p/4581591.html