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

问题描述 投票:6回答:1

我看过:

他们似乎都说,对于同一个选择器多次出现,最后一个获胜。但是,那不是我发生的事情。因此,鉴于“ 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,而不是最后一个,红色。参见Precedence of CSS rules Sample 2。主体颜色为Aqua,但Aqua.css早于Red.css。我找到的所有答案都说车身颜色为红色。

[只要我有多个指向CSS样式表的链接,并且它们之间的唯一区别是某物(元素或类或其他东西)的颜色,则使用first样式表,而不是last,但是看起来而不是我读到的一切都应该发生的事情。我尝试过Edge,Chrome和IE;我注意到它们之间没有相关的区别。

所以我有以下两个问题:

  • 我是否纠正我看到的行为(使用第一个链接标记而不是最后一个链接标记)与其他答案不同?
  • 如果是这样,那为什么呢?

[我很抱歉是否应该发布其他主题之一的答案,但我认为创建一个新问题更干净。

我问的原因是我正在尝试创建动态样式表系统,因此了解优先级更为重要,仅尝试某种方法来查看有效的方法比正常情况下效率低。我将尝试解释这些规范,但就其他答案而言,我想了解其他线程在此处提供的内容。

css operator-precedence
1个回答
10
投票

免责声明:我的旧答案和思路完全错误,因此我将其删除,并将其发布为替代内容,以免与之前的任何讨论相混淆。

[当给<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>元素恢复为规范中定义的标准行为。

© www.soinside.com 2019 - 2024. All rights reserved.