CSS规则的优先顺序

Question

我见过:

• CSS 2,使用link元素导入的样式表的优先级
• CSS样式表以什么顺序覆盖？
• stylesheet - 一个CSS文件可以优先于另一个CSS文件吗？

他们似乎都说,对于多次出现的相同选择器,最后一个选择器获胜.然而,这不是我发生的事情.因此,鉴于"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.请参阅CSS规则的优先级示例2.身体颜色是Aqua但Aqua.css在Red.css之前.我找到的所有答案都说体色是红色的.

每当我有多个链接到css样式表时,它们之间唯一的区别就是某些东西的颜色(元素或类或其他东西)然后使用第一个样式表,而不是最后一个样式表,但这似乎不是我读到的所有内容都应该发生的事情.我尝试过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样式从未被应用过,因为该样式表集当前不是活动的.

根据规格:

此外,title属性在此元素上具有特殊语义:链接的标题; 替代样式表集名称.

另外值得一读:"CSS:替代样式表":

文档不需要具有单个样式表.您可以为其提供默认样式和任意数量的备选方案供读者选择.例如,这个页面可以替代所有W3C核心样式,以及Web上其他地方找到的两个样式表(作者:David Baron).

读者如何选择替代方案取决于浏览器.并非所有浏览器都提供菜单,但很多浏览器都提供了菜单.例如,在Opera,Internet Explorer和Firefox中,您可以在"视图"菜单下找到样式.截至2012年,Chrome需要扩展(例如,Decklin Foster的Style Chooser).

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