link与@import自己的一些愚见

CSS 的几中引入方式

我们首先来回顾一下 CSS 的引入方式。

1.行内样式

<div style="color: red">行内样式</div>

2.内嵌式

<style>
  * {
    margin: 0;
    padding: 0;
  }
</style>

3.外联式

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

这就完了吗？
千万别忘了还有@import 方式！

<style>
  /* 引入外部css文件 */
  @import url(index.css);

  div {
    width: 100%;
    height: 100px;
    background: #000;
  }
</style>

link 与@import 的区别

虽然他们都属于外联式，但@import 只能写在<style></style>标签或者 css 文件中且最好写在它们的首行,否则会出问题

<style>
  div {
    width: 100%;
    height: 100px;
    background: #000;
  }
  * {
    margin: 0;
    padding: 0;
  }
  body {
    height: 100vh;
    background-color: aqua;
  }
  @import url(index.css);
</style>

其中 index.css 文件内容为

* {
  margin: 0;
  padding: 100px;
}
body {
  height: 100vh;
  background-color: aqua;
}

如上图所示，通过结果得知执行顺序：先解析@import 语句，将外部的样式引入进来，然后再从头开始解析<style></style>内的 css 样式。
不管放在那个位置，都是会去先下载解析@import 的 css 文件，再去从头解析 css 样式，所以，为了避免误会，我们建议将@import 写在首行。

我们再来看看@import 与 link 的执行顺序到底是怎么样的。

---

我在网上找到的答案：

页面被加载的时，link 会同时被加载，而@import 引用的 CSS 会等到页面被加载完再加载；

---

```html ```

其中 test.css 文件内容为

body {
  background-color: #4e5ecd;
}

我们发现被覆盖了，这似乎是在我们意料之中。符合网上说的结果。
但我们将 link 放置到@import 之前呢？

<style>
  @import url(index.css);
  div {
    width: 100%;
    height: 100px;
    background: #000;
  }
  * {
    margin: 0;
    padding: 0;
  }
  body {
    height: 100vh;
    background-color: aqua;
  }
</style>
<link rel="stylesheet" href="test.css" />

不是说好 link 先加载，@import 后加载吗？这样不就应该是 link 里面的相同的样式会被@improt 覆盖吗？

在我纠结了许久过后，我觉得网上说的加载顺序可能有些问题

---

这是我自己的理解：

通过 NetWork 我们发现下载顺序其实和我们书写的位置紧密相关。link 与@import 谁先被解析到，谁就先下载。当 DOM Tree 生成完后就按照顺序去执行 css 代码。

link 在前时，文件加载顺序

@import 在前时，文件加载顺序