项目上列出的类的顺序是否会影响CSS？

我知道特定性最高的CSS选择器优先（即

.classname

#idname

）

我也知道，如果事情的特殊性相同，那么最后一句话优先：

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

---

DOM元素上HTML类的顺序是否会影响语句优先级？

不，正如您所说，如果两个规则具有相同的特殊性，则稍后在CSS中出现的规则将被应用。

不，它不会。W3C标准的定义没有提到类的出现顺序。

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

是的，它可以（取决于声明） 你的问题是:

DOM元素上CSS类的顺序是否会影响语句优先级

这取决于所讨论的陈述

HTML排序通常并不重要

当直接调用类（即

.class1

或

.class2

）或组合调用（即

.class1.class2

或

.class2.class1

）时，以下内容是等效的：

使用以下代码来匹配属性值的开头，第二个

div

的字体颜色不会有任何变化，并且由于类的顺序不同，每个

div

将具有不同的属性：

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

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

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

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

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

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

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

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

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

使用以下代码来匹配属性值的末尾，第一个

div

的字体颜色不会有任何变化，并且由于类的顺序不同，每个

div

将具有不同的属性：

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

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

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

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

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

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

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

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

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

关于“优先权”的澄清声明 需要明确的是，在上述情况下，就“语句优先级”而言，受影响的实际上是语句是否实际应用于元素的问题。但由于应用程序与否在某种意义上是最基本的优先级，而且由于上述情况下，此类应用程序实际上是基于HTMLDOM元素上类的顺序（而不是类的存在与否），因此我认为值得添加这一点作为答案

类排序的可能有效使用？ 这是一个发生在我身上的想法，基于博尔特科克的评论。考虑两个类被用来根据不同的因素被认为是不同样式的关键元素。从理论上讲，这两个类可以使用属性选择器的组合来替代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>

/* 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的功能可能不会大错特错

当然，应该注意的是，如果必须使用属性选择器根据

类

属性进行样式设置，那么代码中的某些地方就会出现可怕的错误。@BoltClock:不一定。我承认这是（而且应该是）一件罕见的事情。但是，例如，如果某个东西只有

class1

，而没有其他类，那么对它进行样式化将是一个合适的用法。另外，在思考这个问题的答案时，我思考了如何利用类排序，通过应用考虑排序的样式来实际减少html的代码大小。我想我会做一个编辑来进一步解释这个想法。@BoltClock它实际上是在语义UI的网格系统中使用的：@Cerelarceny:我现在真的很好奇是否有HTML或DOM规范声明保留/保证了类名的顺序，因为否则我无法想象像语义UI这样的东西是如何依赖它的（这也是我发表原始评论的原因——我并不反对Scott的观点，即使用它来匹配只有一个类名的元素）是的，我今天早上才发现Semantic做了这件事。我甚至不知道这是可能的。就Semantic而言，他们使用的是这样的系统：

。本质上，这个代码被解释为

六宽平板电脑

和

八宽电脑

，这是特定于CSS.T中两个单独的媒体查询的his的计算如下：

.ui.grid>[class*=“八宽计算机”]。列{width:50%！important；}

。它也称为HTML类，因为您用HTML而不是CSS定义类。