具有 title 属性的 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。我找到的所有答案都说主体颜色是红色。

每当我有多个 links 到 css 样式表并且它们之间的唯一区别是某些东西（元素或 class 或其他）的颜色时，[=39=使用了 ]first 样式表，而不是 last，但这似乎不是我读到的所有内容都应该发生的情况。我试过 Edge、Chrome 和 IE；我注意到它们之间没有相关差异。

所以我有以下两个问题：

我看到的行为（使用第一个 link 标记而不是最后一个）与其他答案不同，我是否正确？
如果是，那为什么呢？

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

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

Answer 1

_{免责声明：我以前的回答和思路是完全错误的，所以我删除了它，并将其作为替代品发布，以免与之前的任何讨论混淆。}

当您为 <link> 元素赋予 title 属性时，您将其定义为替代样式 sheet 集。

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

样式的优先级是一个转移注意力的问题。 Red.css 样式根本没有被应用，因为该样式 sheet 集当前未激活。

Per the spec:

Also, the title attribute has special semantics on this element: Title of the link; alternative style sheet set name.

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

A document doesn't need to have a single style sheet. You can give it a default style and any number of alternatives for the reader to choose from. This page, for example, has as alternatives all the W3C Core Styles, plus two style sheets found elsewhere on the Web (author: David Baron).

How the reader can select the alternatives depends on the browser. Not all browsers yet offer a menu for it, but many do. E.g., in Opera, Internet Explorer and Firefox you can find the styles under the “View” menu. As of 2012, Chrome requires an extension (e.g., Decklin Foster's Style Chooser).

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

具有 title 属性的 CSS 样式表链接的优先级

Precedence of CSS stylesheet links with title attribute

css

operator-precedence