引入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条的样式表。

「五年博客,如果觉得我的文章对您有用,请帮助本站成长」

订阅周报 关注微博

原创文章:引入CSS文件的@import与link的权重分析 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/css-import-link.html)

发表评论

请登录后发表评论:

“引入CSS文件的@import与link的权重分析”有2个评论

  1. 大迷糊的小糊涂

    个人建议哈,你这个结论有一些错误。实验得出,@import一定要放在样式表的前面,不管是内部还是外部样式,都要放在前面,而且这个在css权威指南上也明确指出了。如果放在末尾就会被浏览器忽略。而如果正确使用三种方式,只是会产生样式覆盖问题,而没有权重优先问题,测试浏览器Chrome

    登录回复
    • 前端博客

      我这边文章没有说权重优先问题,我是说那个比较后加载,相同内容下就使用那个样式的。
      “其它时候以样式加载顺序为参考,后加载的优先级越高(最近优先原则)”,可能使用你上面这种说法比较容易理解,即后面的覆盖前面的。
      至于你说放在后面的会忽略,我倒是第一次听说,之前也没试过放在最后。

      登录回复