具有title属性的CSS样式表链接的优先级 [英] Precedence of CSS stylesheet links with title attribute
问题描述
我看过:
- 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"具有:
They all seem to say that, for the same selector occurring multiple times, the last one wins. However that is not what happens for me. So given that "Aqua.css" has:
body {color:aqua;}
"Red.css"具有:
And "Red.css" has:
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>
如其他答案所述，使用了最后一个，黄色.如果我将其更改为:
The last one, Yellow, is used, as the other answers say. If I change that however to:
<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"/>
然后使用水色，而不是最后一个红色.请参见 CSS规则示例2的优先级.主体颜色为Aqua，但Aqua.css早于Red.css.我找到的所有答案都说车身颜色将是红色.
Then Aqua is used, not the last one, Red. See Precedence of CSS rules Sample 2. The body color is Aqua yet Aqua.css is before Red.css. All the answers I find say that the body color would be Red.
每当我有多个指向CSS样式表的链接，并且它们之间唯一的区别是某物(元素或类等)的颜色时，就会使用 first 样式表，而不是 last ，但这似乎并不是我读到的所有内容都应该发生的事情.我已经尝试过Edge，Chrome和IE；我发现它们之间没有相关的区别.
Whenever I have multiple links to css stylesheets and the only difference among them is the color of something (element or class or whatever) then the first stylesheet is used, not the last, yet that seems to not be what everything I read says should happen. I have tried Edge, Chrome and IE; I notice no relevant difference among them.
所以我有以下两个问题:
So I have the following two questions:
- 我是否纠正我所看到的行为(使用第一个链接标记而不是最后一个链接标记)与其他答案不同吗?
- 如果是，那为什么呢?
抱歉，如果我应该发布其他主题之一的答案，但我认为创建一个新问题会更干净.
I apologize if I should have posted an answer to one of the other threads, but I think it is cleaner to create a new question.
我要问的原因是我正在尝试创建一个动态样式表系统，因此了解优先级更为重要，仅尝试某种方法来查看有效的方法比正常情况下效率低.我将尝试解释这些规范，但就其他答案而言，我想了解其他线程在此处提供的内容.
The reason I am asking is that I am trying to create a dynamic stylesheet system so understanding the precedence is more important, it is less effective to just try something to see what works than in normal circumstances. I will attempt to interpret the specifications but to the extent that has been in other answers, I want to understand what has been provided here in other threads.
推荐答案
免责声明:我的旧答案和思路完全错误，因此我将其删除，并以替代形式发布，以免与任何先前的讨论相混淆.
为<link>元素赋予title属性时，您将其定义为替代样式表集.
When you give a <link> element a title attribute, you are defining it as an alternative style sheet set.
<link rel="stylesheet" type="text/css" href="Aqua.css" title="Aqua"/>
^^^^^^^^^^^^
<link rel="stylesheet" type="text/css" href="Red.css" title="Red"/>
^^^^^^^^^^^
样式的优先次序是红色鲱鱼.完全没有应用Red.css样式，因为该样式表集当前未激活.
The precedence of styles was a red herring. The Red.css styles were never being applied at all, because that style sheet set was not currently active.
根据规范:
此外，title属性在此元素上具有特殊的语义:链接的标题；替代样式表集名称.
Also, the title attribute has special semantics on this element: Title of the link; alternative style sheet set name.
也值得一读:"CSS:替代样式表" :
文档不需要具有单个样式表.您可以给它提供默认样式，以及其他多种选择，供读者选择.例如，此页面具有所有W3C核心样式的替代方法，以及在Web上其他位置(作者:David Baron)提供的两个样式表.
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).
阅读器如何选择替代项取决于浏览器.并非所有浏览器都提供菜单，但是许多浏览器都提供菜单.例如，在Opera，Internet Explorer和Firefox中，您可以在查看"菜单下找到样式.从2012年起，Chrome需要扩展(例如Decklin Foster的样式选择器).
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>元素恢复为规范中定义的标准行为.
You're supposed to use rel="alternative stylesheet" when defining alternative stylesheets, but this appears to be a case where the browser anticipated the behavior. Remove the title attributes, and the <link> elements return to their standard behavior as defined in the spec.
这篇关于具有title属性的CSS样式表链接的优先级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
