定义颜色属性的多个类的优先级由声明顺序而不是规范顺序设置答案

【问题标题】：Precedence of multiple classes defining color property being set by declaration order rather than specification order定义颜色属性的多个类的优先级由声明顺序而不是规范顺序设置
【发布时间】：2013-07-18 15:28:47
【问题描述】：

考虑到定义颜色属性的两个具有相同特性的类，我认为元素类属性中列出的最后一个类将具有优先权。

来自http://htmlhelp.com/reference/css/structure.html：

规范的顺序 为方便起见，当两条规则具有相同的权重时，最后指定的规则获胜。

在以下真空代码示例中，定义类规则集的顺序决定了优先级。此处最后一个或最近的类规则集定义优先。

<style>
    .makeBlue {color: blue;}
    .makeGreen {color:green;}
</style>
<div>
    <p class="makeGreen makeBlue">makeGreen makeBlue</p>
    <p class="makeBlue makeGreen">makeBlue makeGreen</p>
</div>

输出文本为绿色。

如果我交换类声明的顺序，先声明 .makeGreen

<style>
    .makeGreen {color:green;}
    .makeBlue {color: blue;}        
</style>
<div>
    <p class="makeGreen makeBlue">makeGreen makeBlue</p>
    <p class="makeBlue makeGreen">makeBlue makeGreen</p>
</div>

输出文本为蓝色。

我以前从未注意到这一点。 edit 我认为 edit 元素类属性中列出的最后一个类优先。

编辑澄清--> 我有时将元素视为宠物，比方说狗。我看到向元素的类属性添加一个类就像向狗发出命令一样。如果我告诉它坐下，然后告诉它躺下，我希望狗躺下。我不希望这只狗保持坐着，因为我教了它如何坐下（最近才教它如何躺下）。

所以...两个问题。

这是应该的吗？回答
如果是这样...为什么？我无法看到必须通过课程挖掘的优势声明以确定哪个在另一个之前声明。

非常感谢！

【问题讨论】：

谢谢，该帖子回答了第一个问题，j08691 和 mathguy54 的回答也是如此。我仍然不确定为什么会这样（问题＃2）。如果我在某处缺少通用参考，请告诉我。我想更好地理解为什么样式声明顺序胜过元素类属性中的出现顺序的根本原因。 编辑的原始问题
“我看到在元素的类属性中添加一个类就像向狗发出命令一样。”这不是一个很好的观察方式。属性与命令非常不同。属性是元素固有的东西，而另一方面，命令是元素所做的事情，通常是按顺序（或一个接一个）。
回答你的第二个问题仅仅是因为“特异性”是一个 CSS 概念。文档语言（在本例中为 HTML）与它没有任何关系。
谢谢！属性/命令的区别踢出了一些蜘蛛网。
我认为狗的类比非常好，尽管它不是这样工作的，但我敢打赌很多人（比如我自己）会凭直觉得出这个结论。如果这是它是如何工作的，IMO 它将阻止大量 !important 指令的发生:)

标签： css css-specificity

【解决方案1】：

您在元素上指定的类的顺序无关紧要。您在样式声明中定义它们的顺序很重要。您发布的引用是在样式声明中，而不是在元素上列出类的顺序。

【讨论】：

接受首次发布答案并澄清我引用的报价。再次感谢。

【解决方案2】：

这似乎限制了选项。如果我想在两个不同的段落中使用两个类但优先级不同，我需要定义第三个类，它与第一个定义的类相同但名称略有不同。

例如

.xxxxx {margin-top: 1em; margin-left: 0; text-align: left; ... [some other attribute definitions]}<br/>

.yyyyy {margin-top: 3em; margin-left: 1em; text-align: justify; ... [some different attribute definitions]}

<p class="yyyyy xxxxx">...</p>

将始终使用 3em 的上边距和 1em 的左边距和 justify 的文本对齐方式以及 xxxxx 和 yyyyy 中的其他属性。但是，可能存在这样一种情况，我想覆盖上边距、左边距和文本对齐设置，同时将所有其他属性保留在 xxxxx 和 yyyyy 中。如果优先级是由类属性中的顺序决定的，那么我可以这样做：

<p class="xxxxx yyyyy">...</p>

既然不是，我必须在有问题的两个下面创建另一个定义，如下所示：

.zzzzz {margin-top: 1em; margin-left 0; text-align: left; ... [some other attribute definitions]}

并使用

<p class="yyyyy zzzzz">...</p>

这似乎不是问题的最佳解决方案，而类属性顺序优先级允许更大的灵活性，而不会破坏 CSS。

顺便说一句，Nook Glowlight 通过允许我按类属性中的顺序设置优先级来按照应有的方式做到这一点。因此我的 css 更加紧凑。

如果我在几十年的编程中学到了什么，那就是优先级最好放在尽可能接近所有工作完成的地方。在链接的静态样式表中放置优先级会降低灵活性。

【讨论】：