21

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

来自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>

输出文本为蓝色。

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

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

所以......两个问题。

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

非常感谢！

4

2 回答 2

22

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

于 2013-07-18T15:32:29.740 回答
0

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

例如

.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 更加紧凑。

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

于 2014-09-26T04:22:41.267 回答