css - 元素上列出的类的顺序会影响 CSS 吗？

Question

我知 Prop 有最高特异性的 CSS 选择器优先(即 .classname <#idname)。

我也知道，如果事物具有相同的特异性，那么最后调用的语句优先:

.classname1 { color: red; }
.classname1 { color: blue; } // classname1 color will be blue

HTML 类在 DOM 元素上的排序会影响语句的优先级吗？

Answer 1

我不得不稍微不同意 Jon 和 Watson 的回答，因为...

是的，它可以(取决于声明)

您的问题是:

Does the ordering of CSS classes on a DOM element affect the statement priority?

这取决于所讨论的陈述。

HTML 顺序通常无关紧要

当直接调用类(即 .class1 或 .class2)或组合调用时，以下是等效的调用(即 .class1.class2 或 .class2.class1):

<div class="class1 class2"></div>
<div class="class2 class1"></div>

根据 HTML 顺序可以影响上述 HTML 的语句优先级的情况

在 HTML 中排序很重要的主要地方是在 CSS 中使用 attribute 选择器。

Example 1 Fiddle使用以下代码寻求匹配属性值，字体颜色不会有任何变化，并且每个 div 将由于类的顺序而具有不同的属性:

[class="class1"] {
    color: red;
}

[class="class1 class2"] {
    background-color: yellow;
}

[class="class2 class1"] {
    border: 1px solid blue;
}

Example 2 Fiddle使用以下代码寻求匹配 属性值的开头，第二个div 的字体颜色不会有任何变化，每个div 都会有由于类的顺序不同的属性:

[class^="class1"] {
    color: red;
}

[class^="class1 class2"] {
    background-color: yellow;
}

[class^="class2 class1"] {
    border: 1px solid blue;
}

Example 3 Fiddle使用以下代码寻求匹配结束 属性值不会对第一个div 的字体颜色有任何改变，并且每个div 都会有由于类的顺序不同的属性:

[class$="class1"] {
    color: red;
}

[class$="class1 class2"] {
    background-color: yellow;
}

[class$="class2 class1"] {
    border: 1px solid blue;
}

关于“优先级”的澄清声明

需要明确的是，在上述情况下，就“语句优先级”而言，受影响的实际上是语句是否实际应用到元素的问题。但由于应用与否在某种意义上是基本优先级，并且由于上述情况是此类应用实际上基于 HTML Dom 元素上的类的排序​​(而不是存在或缺席)，我认为值得将其添加为答案。

类排序的可能有效使用？

这是我的一个想法，基于 BoltClock 的评论。考虑仅使用两个类根据被认为对不同样式至关重要的任何因素来设置元素样式。这两个类理论上可以使用属性选择器的组合来代替 11 个不同的单独类的使用(实际上，正如稍后将指出的那样，只有一个类的可能性几乎是无限的，但我稍后会讨论这个，因为这个帖子是关于多个类的排序)。对于这两个类，我们可以按如下方式设置不同的元素样式:

假设这些 HTML 组合

<div class="class1">Element 1</div>
<div class="class2">Element 2</div>
<div class="class1 class2">Element 3</div>
<div class="class2 class1">Element 4</div>

CSS 可能性

/* simply has the class */
.class1 {} /* affects elements 1, 3, 4 */
.class2 {} /* affects elements 2-4 */
/* has only a single class */
[class="class1"] {} /* affects element 1 only */
[class="class2"] {} /* affects element 2 only */
/* simply has both classes */
.class1.class2 {} /* affects elements 3-4 */
/* has both classes, but in a particular order */
[class="class1 class2"] {} /* affects element 3 only */
[class="class2 class1"] {} /* affects element 4 only */
/* begins with a class */
[class^="class1"] {} /* affects elements 1 & 3 only */
[class^="class2"] {} /* affects elements 2 & 4 only */
/* ends with a class 
   NOTE: that with only two classes, this is the reverse of the above and is somewhat
   superfluous; however, if a third class is introduced, then the beginning and ending 
   class combinations become more relevant.
*/
[class$="class1"] {} /* affects elements 2 & 4 only */
[class$="class2"] {} /* affects elements 1 & 3 only */

如果我计算正确，3 个类可以提供至少 40 种选择器选项组合。

为了澄清我关于“无限”可能性的说明，如果逻辑正确，单个类可能会嵌入通过 [attr*=value] 语法查找的代码组合。

这一切是否太复杂而难以管理？可能吧。这可能取决于其具体实现方式的逻辑。我想指出的一点是，如果有人需要并计划好它，CSS3 可以使类的顺序变得重要，并且利用这种能力可能不是可怕的错误以这种方式使用CSS。