带有标题属性的 CSS 样式表链接的优先级

Question

我见过：

• CSS 2, precedence of stylesheets imported using link element
• In which order do CSS stylesheets override?
• stylesheet - Can one CSS file take priority over another CSS file?

他们似乎都说，对于多次出现的同一个选择器，最后一个获胜。然而，这不是发生在我身上的事情。因此，鉴于“Aqua.css”具有：

body {color:aqua;}

而“Red.css”有：

body {color:red;}

然后使用以下内容：

<link rel="stylesheet" type="text/css" href="Aqua.css" title="Aqua"/>
<link rel="stylesheet" type="text/css" href="Red.css" title="Red"/>
<style type="text/css">
body {color: lime;}
body {color: yellow;}
</style>

正如其他答案所说，使用了最后一个黄色。但是，如果我将其更改为：

<style type="text/css">
body {color: lime;}
body {color: yellow;}
</style>
<link rel="stylesheet" type="text/css" href="Aqua.css" title="Aqua"/>
<link rel="stylesheet" type="text/css" href="Red.css" title="Red"/>

然后使用 Aqua，而不是最后一个，Red。见Precedence of CSS rules Sample 2。主体颜色是 Aqua 但 Aqua.css 在 Red.css 之前。我找到的所有答案都说体色是红色。

每当我有多个指向 css 样式表的链接并且它们之间的唯一区别是某些东西（元素或类或其他）的颜色时，就会使用 first 样式表，而不是 last，但这似乎不是我读到的一切都应该发生的事情。我试过 Edge、Chrome 和 IE；我注意到它们之间没有相关的区别。

所以我有以下两个问题：

• 我是否纠正了我看到的行为（使用第一个链接标签而不是最后一个）与其他答案不同？
• 如果是，那为什么？

如果我应该对其他线程之一发布答案，我深表歉意，但我认为创建一个新问题更简洁。

我问的原因是我正在尝试创建一个动态样式表系统，因此了解优先级更为重要，与正常情况下相比，仅仅尝试一些东西来看看什么是有效的效率较低。我将尝试解释规范，但就其他答案中的情况而言，我想了解其他线程中提供的内容。

Answer 1

_{免责声明：我的旧答案和思路完全错误，因此我已将其删除，并将其发布为替代品，以免与之前的任何讨论混淆。}

当您为 <link> 元素提供 title 属性时，您将其定义为替代样式表集。

<link rel="stylesheet" type="text/css" href="Aqua.css" title="Aqua"/>
                                                       ^^^^^^^^^^^^
<link rel="stylesheet" type="text/css" href="Red.css" title="Red"/>
                                                      ^^^^^^^^^^^

样式的优先级是红鲱鱼。 Red.css 样式根本没有被应用，因为该样式表集当前未激活。

Per the spec:

另外，title 属性在这个元素上有特殊的语义：链接的标题；替代样式表集名称。

也值得一读："CSS: alternative style sheets":

一个文档不需要有一个样式表。你可以给它一个默认样式和任意数量的替代品供读者选择。例如，此页面包含所有 W3C 核心样式作为替代，以及在 Web 其他地方找到的两个样式表（作者：David Baron）。

读者如何选择选项取决于浏览器。并非所有浏览器都提供菜单，但很多都提供。例如，在 Opera、Internet Explorer 和 Firefox 中，您可以在“查看”菜单下找到样式。自 2012 年起，Chrome 需要一个扩展程序（例如，Decklin Foster 的样式选择器）。

您应该在定义替代样式表时使用rel="alternative stylesheet"，但这似乎是浏览器预期该行为的情况。移除 title 属性，<link> 元素将恢复为规范中定义的标准行为。