区别:

  1. link属于html标签。@import在css中使用表示导入外部样式表;
  2. 页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载;
  3. import只在IE5以上才能识别,而link是HTML标签,无兼容问题;
  4. link方式的样式的权重 高于@import的权重;
  5. link 支持使用javascript改变样式 (document.styleSheets),后者不可

使用场景:

 1<head>
 2    <!-- link是标签,引入外部样式表 -->
 3    <link rel="stylesheet" href="./a.css">
 4    <style>
 5        
 6        @import url('./b.css');
 7        .box{
 8          width: 100px;
 9          height: 100px;
10          background: green;
11        }
12    </style>
13</head>
个人笔记记录 2021 ~ 2025