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。请参见。身体颜色是Aqua，但Aqua.css是在Red.css之前。所有的答案，我发现，身体颜色将是红色。

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

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

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


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

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

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

解决方案

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 worth reading: "CSS: alternative style sheets":

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规则的优先级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！