Question

我知道具有最高特异性的CSS选择器优先（即.classname＆lt; #idname）。

我也知道如果事情具有相同的特异性，那么最后一个被调用的语句优先：

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

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

Answer 1

我不得不与Jon和Watson的回答略有不同，因为......

是的，可以（取决于声明）

你的问题是：

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

这取决于相关陈述。

HTML订购通常不重要

以下等同于直接调用类（即.class1或.class2）或组合调用（即.class1.class2或.class2.class1）：

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

基于HTML订单可以影响上述HTML的语句优先级的案例

在HTML中排序的主要地方是在CSS中使用属性选择器。

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的评论，这是我的想法。考虑只使用两个类来根据被认为对不同样式至关重要的因素来设置元素的样式。理论上，这两个类可以使用属性选择器的组合来替换十一个不同的单独类的使用（实际上，后面将会提到，可能性几乎是无限的，但只有一个类，但我会在一瞬间讨论这个post是关于多个类的排序）。对于这两个类，我们可以按如下方式对元素进行不同的设置：

假设这些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。

Answer 2

不，它没有。 W3C标准的relevant part没有提及类的外观顺序。

Answer 3

不，就像你说的那样，如果两个规则具有相同的特异性，那么将会应用CSS中稍后的规则。

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

3 个答案:

是的，可以（取决于声明）

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

可能有效使用班级订购？