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

我知道具有最高特异性的CSS选择器优先(即.classname <#idname)。我也知道如果事情是相同的特异性，那么最后一个语句调用优先：

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

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

解决方法

我不得不稍微不同意Jon和Watson的答案，因为…

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

您的问题是：

Does the ordering of CSS classes on a DOM element affect the statement priority?

这取决于有关的陈述。

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的力量。

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

解决方法

相关文章