Question

我见过：

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

每当我有多个指向css样式表的链接时，它们之间唯一的区别就是某些东西（元素或类或其他）的颜色，那么使用第一个样式表，而不是 last < / strong>，但这似乎不是我读到的所有内容都应该发生的事情。我尝试过Edge，Chrome和IE;我注意到它们之间没有相关的区别。

所以我有以下两个问题：

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

如果是，那么为什么？

如果我应该在其他线程中找到答案，我道歉，但我认为创建一个新问题更清晰。

我之所以要问的是，我正在尝试创建一个动态样式表系统，因此理解优先级更为重要，只是尝试一些东西来查看比正常情况更有效的东西。我将尝试解释规范，但在其他答案的范围内，我想了解其他线程中提供的内容。

Answer 1

_{免责声明：我的旧答案和思路完全错误，所以我删除了它，并将其作为替代发布，以免与之前的任何讨论混淆。}

当您为<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>元素返回到规范中定义的标准行为。

CSS规则的优先级

1 个答案: