引入 css 的两种方式 -- link 和 @import 的区别？

原创于 2020-10-29 11:55:25 发布 · 643 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css

本文对比了HTML中的link标签与CSS中的@import在加载CSS、JS控制、兼容性及使用限制等方面的差异，并详细阐述了它们在权重分配上的不同。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

（1）link 属于 HTML 标签，除了加载 CSS 外，还能用于定义 rel 连接属性等作用；而 @import 只能用于加载 CSS;
   
（2）link 支持使用 js 控制 DOM 去改变样式，而 @import 不支持;

（3）@import 是 CSS2.1 提出的，只在 IE5 以上才能被识别，而 link 是 HTML 标签，无兼容问题;

（4）@import 在同一个 css 文件里有引用个数限制，大概在 30 个左右，多余的直接忽略;

另外，值得注意的是：

1，@import 必须放在 css 文件的顶部，如果放在尾部直接无效

2，权重遵循就近原则，link 标签越靠下权重越高，@import 也是，不过 @import 的优先级是一定要比当前所在 css 文件里的 css 规则低的

3，@import 可以嵌套使用，但权重依然遵循就近原则

4，@import 嵌套使用可能会产生白屏时间较长等问题