Question

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

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

输出文字为蓝色。

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

修改的澄清 - ＆gt; 我有时会把一个元素想象成一只宠物，让我们说一只狗。我看到在元素的class属性中添加一个类作为发出dog命令。如果我告诉它坐下，然后告诉它躺下，我希望狗躺下。我不认为这只狗会保持坐着，因为我教它如何坐下（最近比）我教它如何躺下。

所以...两个问题。

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

非常感谢！

Answer 1

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

Answer 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中的其他属性。但是，在某些情况下我可能会覆盖margin-top，margin-left和text-align设置，同时保留xxxxx和yyyyy中的所有其他属性。如果优先级由class属性中的顺序确定，那么我将通过这样做来选择该选项：

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

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

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

2 个答案: