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

Question

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

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

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

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

原文由 rememberlenny 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我不得不稍微不同意乔恩和沃森的回答，因为……

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

你的问题是：

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

这取决于有问题的陈述。

HTML 排序通常不重要

以下 是 对类的直接调用（即 .class1 或 .class2 ）或组合调用（即 .class1.class2 或 .class2.class1 ）：

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

基于 HTML 顺序影响上述 HTML 语句优先级的情况

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

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

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

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

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

示例 2 Fiddle 使用以下代码寻求 匹配属性值的开头 将不会对第二个 div 的字体颜色进行任何更改，并且每个 div 将由于排序而具有不同的属性类：

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

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

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

示例 3 使用以下代码寻求 匹配属性值结尾的 小提琴不会对第一个 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 的力量可能不是 _大错特错_。

原文由 ScottS 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

不，不是的。 W3C 标准的 相关部分 没有提及类的出现顺序。

原文由 Jon 发布，翻译遵循 CC BY-SA 3.0 许可协议