链接标签顺序对 html 有影响吗？ [复制]答案

【问题标题】：Does the link tag order make a difference in html? [duplicate]链接标签顺序对 html 有影响吗？ [复制]
【发布时间】：2022-06-25 14:26:02
【问题描述】：

我正在尝试使用 Google 字体，第一种情况和第二种情况有什么区别吗？比如第二种情况下styles.css文件中定义的字体是否在浏览器中渲染较晚。

<!-- 1st case -->
<link rel="stylesheet" href="google font url">
<link rel="stylesheet" href="./styles.css">

<!-- 2nd case -->
<link rel="stylesheet" href="./styles.css">
<link rel="stylesheet" href="google font url">

【问题讨论】：

标签： html css

【解决方案1】：

如果你想使用你从谷歌获得的字体styles.css，你会想采用第一个方法，这个：

<!-- 1st case -->
<link rel="stylesheet" href="google font url">
<link rel="stylesheet" href="./styles.css">

否则，您不能，因为 CSS 会从上到下进行解释。如果您想看到不同之处，请按以下顺序使用例如此字体：

<link href="https://fonts.googleapis.com/css2?family=Shizuru&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./styles.css">

在您的 styles.css 中，定义以下内容：

 *{
   font:inherit;
 }
 html{
  font-family: 'Shizuru', cursive;
 }

看看页面，然后像这样改变顺序，看看有什么不同：

<link rel="stylesheet" href="./styles.css">
<link href="https://fonts.googleapis.com/css2?family=Shizuru&display=swap" rel="stylesheet">

【讨论】：

即使在第二种情况下，页面看起来也很好，你说的可能吗？还是必然如此？
是的。看结果，不知道有什么区别。
!!!!为什么会这样？ rel 顺序是否也有影响？
嗯...... fonts.googleapis.com/css2?family=Shizuru&display=swap" rel="stylesheet"> 有问题。但 fonts.googleapis.com/css2?family=Shizuru&display=swap"> 没问题。有什么不同..？

【解决方案2】：

一般来说，CSS 文件是按照它们在页面中出现的顺序加载的。因此，如果您的第二个链接与第一个链接发生冲突，则后者将适用。

【讨论】：

【解决方案3】：

是的，它会有所作为。

有一个简单的规则，后面定义的样式会覆盖前面定义的样式。

在第一种情况下，您可以对最终页面样式进行一些控制，因为您可以修改从第 3 方样式定义的属性。

【讨论】：