我看过:
他们似乎都说,对于同一个选择器多次出现,最后一个获胜。但是,那不是我发生的事情。因此,鉴于“ 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;我注意到它们之间没有相关的区别。
所以我有以下两个问题:
[我很抱歉是否应该发布其他主题之一的答案,但我认为创建一个新问题更干净。
我问的原因是我正在尝试创建动态样式表系统,因此了解优先级更为重要,仅尝试某种方法来查看有效的方法比正常情况下效率低。我将尝试解释这些规范,但就其他答案而言,我想了解其他线程在此处提供的内容。
免责声明:我的旧答案和思路完全错误,因此我将其删除,并将其发布为替代内容,以免与之前的任何讨论相混淆。
[当给<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: alternative style sheets":
文档不需要一个样式表。您可以为它提供默认样式,以及其他多种选择,供读者选择。例如,此页面具有所有W3C核心样式的替代方法,以及两个在Web上其他位置找到的样式表(作者:David Baron)。
读者如何选择替代方案取决于浏览器。并非所有浏览器都提供菜单,但是许多浏览器都提供菜单。例如,在Opera,Internet Explorer和Firefox中,您可以在“查看”菜单下找到样式。从2012年起,Chrome需要扩展(例如Decklin Foster的样式选择器)。
您应该会在定义替代样式表时使用rel="alternative stylesheet"
,但这似乎是浏览器预期其行为的情况。删除title
属性,<link>
元素恢复为规范中定义的标准行为。