我知道具有最高特异性的 CSS 选择器优先（即.classname #idname）。
我也知道，如果事物具有相同的特异性，那么最后调用的语句优先：
.classname1 { color: red; }
.classname1 { color: blue; } // classname1 color will be blue
HTML 类在 DOM 元素上的顺序会影响语句的优先级吗？
【问题讨论】：
标签： css css-selectors
我不得不稍微不同意 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 中使用 attribute 选择器。
Example 1 Fiddle 使用以下代码寻求匹配 属性值不会有任何字体颜色变化，并且每个div 将由于类的顺序而具有不同的属性： p>
[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。
【讨论】：
class 属性设置样式，那么某处的某些地方是可怕错误的代码。
class1 并且上面没有其他类，则为它设置样式是合适的用途。此外，在考虑这个问题的答案时，我思考了如何通过应用考虑到排序的样式来利用类排序也许来实际减少html的代码大小.我想我会进行编辑以进一步解释这个想法。
<div class="six wide tablet eight wide computer column"></div>。本质上，这段代码被解释为six wide tablet 和eight wide computer，它们特定于 CSS 中的两个单独的媒体查询。计算如下：.ui.grid > [class*="eight wide computer"].column { width: 50% !important; }.
不，它没有。 W3C 标准的relevant part 没有提及类的出现顺序。
【讨论】：
不，它不会像你说的那样，如果两条规则具有相同的特异性，那么稍后出现在 CSS 中的规则将被应用。
【讨论】：