link和@import的

区别

1. 从属关系：link 是 HTML 标签，除了能够加载 CSS，还可以加载 js 图标等功能；而@import 属于 CSS 范畴，只可以加载 CSS 样式表

2. 加载顺序： 页面被加载时，link 会和 html 同时被加载而@import 引入的 CSS 将在页面加载完毕后被加载

3. 兼容性：link 是 XHTML 标签，无兼容问题@import 则是在 CSS2.1 提出的，低版本的浏览器不支持

4. link 支持使用 JS 控制 DOM 改变 link 标签引入的样式，而@import 不支持

自己的理解

123暂且不论，说说对4的理解。

之前没仔细看，以为是link引入的样式，可以用js改变，但是@import不可以。虽然当时就觉得有点奇怪了，但是也没仔细想，后来被问到这个才去深入了解了一下。

link

可以通过js改变link引入的样式文件

<link rel="stylesheet" href="style.css" />

也就是说，可以用js 去改变link的href属性值。把style.css改为style1.css文件。

实践一下。

首先，建立一个html文件

<div class="con">
   <div class="box">测试测试测试测试测试测试测试测试测试测试</div>
   <div class="box1">2</div>
   <div class="box2">3</div>
</div>

建立两个css文件

/* style.css */
.con{
    background-color: red;
}

/* style1.css */
.con{
    background-color: blue;
}

在html文件中用link引入style.css

<link rel="stylesheet" href="style.css" />

可以看到是这样的 

然后添加一个按钮，按下按钮就把link引入的文件换成style1.css

<button class="changefile">click to change file</button>

再添加js

let changefile = document.querySelector(".changefile");
let linkEle = document.querySelector("link");
changefile.addEventListener("click", handleChangeFile);
function handleChangeFile() {
  linkEle.setAttribute("href", "style1.css");
  changefile.setAttribute("disabled", ""); // 点击按钮后禁用
}

点击前

点击后

这样就实现了用js改变样式文件

实际上，也可以直接用js添加link标签，引入样式文件

同样添加一个按钮来实现功能

<button class="add">click to add link</button>

let add = document.querySelector(".add");
let head = document.querySelector("head");
add.addEventListener("click", handleClick);
function handleClick() {
  var linkEle = document.createElement("link");
  linkEle.setAttribute("rel", "stylesheet");
  linkEle.setAttribute("href", "style.css");
  head.appendChild(linkEle);
  add.setAttribute("disabled", "");
}

点击前

点击后

@import

一般来说，@import的用法如下，用url引入样式表

@import url;
@import url list-of-media-queries;

<style>
   @import url(style.css);
</style>

@import url()后面的list-of-media-queries则是一个条件

是一个逗号分隔的 媒体查询 条件列表，决定通过 URL 引入的 CSS 规则 在什么条件下应用。如果浏览器不支持列表中的任何一条媒体查询条件，就不会引入 URL 指明的 CSS 文件。

比如说，还是刚才那个场景，我让他自适应宽度的变化

<style>
   @import url(style.css) screen and (max-width: 480px);
   @import url(style1.css) screen and (min-width: 480px);
</style>

屏幕宽度大于480时，是蓝色背景

屏幕宽度小于480时，是红色背景

然后我又想到如果用link来实现这个功能呢？就不如直接用@media了