CSS规则的优先级 [英] Precedence of CSS rules

问题描述

我看过：

• CSS 2，使用链接元素导入的样式表的优先级


• CSS样式表重写的顺序


• 样板 - 一个CSS文件的优先级高于另一个CSS文件？

他们似乎都说，对于多次出现的同一个选择器，最后一个选择器获胜。但这不是我发生了什么。所以考虑到Aqua.css有：

  body {color：aqua;} 
  

并且Red.css具有：

  body {color：red;} 
  

然后使用以下命令：

 < link rel =stylesheettype =text / csshref =Aqua.csstitle =Aqua/& 
< link rel =stylesheettype =text / csshref =Red.csstitle =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 =stylesheettype =text / csshref =Aqua.csstitle =Aqua/> 
< link rel =stylesheettype =text / csshref =Red.csstitle =Red/> 
  

然后使用Aqua，而不是最后一个，Red。请参见 CSS规则优先级示例2 。身体颜色是Aqua，但Aqua.css是在Red.css之前。所有的答案，我发现，身体颜色将是红色。

每当我有多个链接到CSS样式表，它们之间的唯一区别是东西的颜色或类或其他），则使用第一样式表，而不是最后，但似乎不是我读到的一切都应该发生。我已经尝试过Edge，Chrome和IE;我注意到他们之间没有相关的区别。

因此，我有以下两个问题：

• 我更正了我看到的行为（使用第一个链接标记而不是最后一个）与其他答案不同？


• 如果是，那么为什么？ li>
  

如果我应该向其他线程发布一个答案，我表示歉意，但我认为创建一个新问题更清晰。 / p>

我问的原因是我试图创建一个动态样式表系统，所以理解优先级更重要，只是尝试看看什么是有效的比正常情况下。我将尝试解释规范，但在其他答案中已经解释的程度，我想了解其他线程中提供的内容。

解决方案

_{免责声明：我的旧答案和思路是完全错误的，所以我删除它，并发布为替换，以免混淆任何先前的讨论。 / sub>}

当您给予< link> 元素a code>属性，您将其定义为替代样式表集。

 < link rel =stylesheet type =text / csshref =Aqua.csstitle =Aqua/> 
 ^^^^^^^^^^^ 
< link rel =stylesheettype =text / csshref =Red.csstitle =Red/> 
 ^^^^^^^^^^ 
  

样式的优先级是红鲱鱼。 Red.css 样式从未应用过，因为该样式表集当前未处于活动状态。

根据规范：

此外，title属性在此元素上有特殊语义：链接的标题;

还值得一读：CSS：替代样式表：

文档不需要有单个样式表。您可以给它一个默认样式和任何数量的替代品供读者选择。例如，这个页面有可选的所有W3C核心样式，以及在网上其他地方找到的两个样式表（作者：David Baron）。

选择替代品取决于浏览器。并不是所有的浏览器都提供一个菜单，但很多人。例如，在Opera，Internet Explorer和Firefox中，您可以在查看菜单下找到样式。自2012年起，Chrome需要一个扩展程序（例如，Decklin Foster's Style Chooser）。

>在定义替换样式表时使用 rel =alternative stylesheet，但这似乎是浏览器预测行为的情况。删除 title 属性，并且< link> 元素返回其规范中定义的标准行为。 / p>

I have seen:

• 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?

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;}

And "Red.css" has:

body {color:red;}

Then using the following:

<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"/>

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.

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:

• Am I correct that the behavior I am seeing (the first link tag is used instead of the last) is different from the other answers?
• If so, then why?

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.

解决方案

_{Disclaimer: My old answer and line of thinking was completely wrong, so I've deleted it, and am posting this as a replacement so as not to be confused with any of the prior discussion.}

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"/>
                                                      ^^^^^^^^^^^

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.

Per the spec:

Also, the title attribute has special semantics on this element: Title of the link; alternative style sheet set name.

Also worth reading: "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).

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.

这篇关于CSS规则的优先级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！