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

Question

我知道具有最高特异性的CSS选择器优先(即.classname< #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中使用属性选择器.

示例1使用以下代码寻求匹配属性值的小提琴将不会对字体颜色进行任何更改,并且div由于类的排序,每个都将具有不同的属性:

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

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

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

示例2使用以下代码寻求匹配属性值的开头的小提琴将不会对第二个的字体颜色进行任何更改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的评论,这是我的想法.考虑只使用两个类来根据被认为对不同样式至关重要的因素来设置元素的样式.理论上,这两个类可以使用属性选择器的组合来替换十一个不同的单独类的使用(实际上,后面将会提到,但是单个类的可能性几乎是无限的,但我会在一瞬间讨论这个问题. 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标准的相关部分没有提及课程的出现顺序.

Answer 3

不,就像你说的那样,如果两个规则具有相同的特异性,那么将会应用CSS中较晚的规则.