难道类一个项目所列顺序影响CSS?(Does the order of classes listed

2019-08-18 01:39发布

我知道最高的特异性CSS选择器的优先级(即.classname < #idname )。

我也知道,如果事情是相同的特异性,于是拨通了最后一条语句的优先级:

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

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

Answer 1:

我必须与乔恩和沃森的答案稍有不同意,因为......

是的,它可以 (根据声明)

你的问题是:

请问CSS类的DOM元素的顺序会影响语句的优先级?

这不依赖于不确定的语句。

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的评论。 考虑只有两个班被用于基于任何因素都视为不同的造型关键的风格元素。 这两个类理论上可以替代使用使用属性选择器(实际的结合十一种不同的个人类,如后面将要提到的,可能性是几乎无限的,但一个类,但我会讨论在某一时刻,因为这文章是关于多类的顺序)。 对于这两个类,我们可以以不同的风格元素,如下所示:

假设这些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将被应用之一。



文章来源: Does the order of classes listed on an item affect the CSS?