css - 具有标题属性的 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>元素a 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 :

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).

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