为什么 <head> 中链接元素的顺序很重要？

【问题标题】：Why does the order of the link elements in <head> matter?为什么 <head> 中链接元素的顺序很重要？
【发布时间】：2014-11-21 17:46:37
【问题描述】：

     <head>
         <link href="font.css" rel="stylesheet">
         <link href="main.css" rel="stylesheet">   
    </head>

"head元素里面有两个link元素，它们的顺序链接元素很重要。

浏览器首先会看到自定义字体 font.css 的链接，然后使字体可在页面中使用。

接下来浏览器会看到 main.css 的链接。由于现在的浏览器知道自定义字体，我们可以在 main.css 中使用它来设置样式元素。”

我想知道为什么顺序很重要（链接到主要 CSS 样式表之前的字体）？

我尝试按其他顺序（在链接到字体之前先链接到主样式表），它仍然有效。

【问题讨论】：

【解决方案1】：

当您覆盖 CSS 定义时，顺序很重要。这是级联样式表“级联”的一部分。如果main.css 不包含任何字体定义，则顺序无关紧要。

例如：设计师为您提供了一个默认的 CSS 文件，但您需要对其进行一些调整。您无需编辑default.css 文件，而是创建一个custom.css 文件并仅更改您想要调整的少数定义。现在顺序很重要。

<head>
    <link href="default.css" rel="stylesheet">
    <link href="custom.css" rel="stylesheet">   
</head>

如果您将custom.css 放在首位，那么您的更改将永远不会出现。

Here's an article 进入各个级别的更多细节。警告，它会让你头晕目眩。

【讨论】：