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

我知道具有最高特定性的CSS选择器优先(即.classname<#idname

我也知道,如果事情的特殊性相同,那么最后一句话优先:

.classname1{颜色:红色;}
.classname1{color:blue;}//classname1颜色将为蓝色

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

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

是的,它可以(取决于声明)

你的问题是:

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

这取决于所讨论的陈述

HTML排序通常并不重要

当直接调用一个类(即.class1.class2)或组合调用(即.class1.class2.class2.class1)时,以下是等效的:

<div class=“class1 class2”&gt&lt/部门>
<div class=“class2 class1”&gt&lt/部门>

根据HTML顺序,上述HTML的语句优先级可能受到影响的情况

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

示例1 Fiddle使用以下代码来匹配属性值,字体颜色不会有任何变化,并且由于类的顺序不同,每个div将具有不同的属性:

[class=“class1”]{
颜色:红色;
}
[class=“class1 class2”]{
背景颜色:黄色;
}
[class=“class2 class1”]{
边框:1px纯蓝色;
}

示例2 Fiddle使用以下代码来匹配属性值的开头,第二个div的字体颜色不会有任何变化,并且每个div由于类的顺序而具有不同的属性:

[class^=“class1”]{
颜色:红色;
}
[class^=“class1 class2”]{
背景颜色:黄色;
}
[class^=“class2 class1”]{
边框:1px纯蓝色;
}

示例3 Fiddle使用以下代码查找匹配属性值的末尾,第一个div的字体颜色不会有任何变化,并且由于类的顺序,每个div将具有不同的属性:

[class$=“class1”]{
颜色:红色;
}
[class$=“class1 class2”]{
背景颜色:黄色;
}
[class$=“class2 class1”]{
边框:1px纯蓝色;
}

关于“优先权”的澄清声明

需要明确的是,在上述情况下,就“语句优先级”而言,受影响的实际上是语句是否实际应用于元素。但由于应用程序与否在某种意义上是最基本的优先级,而且由于上述情况下,此类应用程序实际上是基于HTML Dom元素上类的排序(而不是类的存在与否),因此我认为值得添加这一点作为答案

类排序的可能有效使用

这是一个发生在我身上的想法,基于博尔特科克的评论。考虑两个类被用来根据不同的因素被认为是不同样式的关键元素。从理论上讲,这两个类可以使用属性选择器的组合来替代11个不同的单独类(实际上,正如后面将要指出的,只有一个类的可能性几乎是无限的,但我稍后将讨论这一点,因为这篇文章是关于多个类的排序的)。对于这两个类,我们可以按如下方式为元素设置不同的样式:

假设这些HTML组合

<div class=“class1”>要素1&lt/部门>
<div class=“class2”>要素2&lt/部门>
<div class=“class1 class2”>要素3&lt/部门>
<div class=“class2 class1”>要素4&lt/部门>

CSS的可能性

/*仅具有类*/
.class1{}/*影响元素1、3、4*/
.class2{}/*影响元素2-4*/
/*只有一个类*/
[class=“class1”]{}/*仅影响元素1*/
[class=“class2”]{}/*只影响元素2*/
/*这两个类都有*/
.class1.class2{}/*影响元素3-4*/
/*有两个类,但顺序特殊*/
[class=“class1 class2”]{}/*仅影响元素3*/
[class=“class2 class1”]{}/*仅影响元素4*/
/*从一节课开始*/
[class^=“class1”]{}/*影响元素1&3只*/
[class^=“class2”]{}/*影响元素2&4只*/
/*以一节课结束
注意:对于只有两个类的情况,这与上面的相反,并且有点
过剩的但是,如果引入第三个类,则开始和结束
类组合变得更加相关。
*/
[class$=“class1”]{}/*影响元素2&4只*/
[class$=“class2”]{}/*影响元素1&3只*/

如果我计算正确,3个类可以提供至少40个选择器选项组合

为了澄清我关于“无限”可能性的说明,如果逻辑正确,单个类可能会嵌入通过[attr*=value]语法查找的代码组合

这一切是否太复杂而难以管理?可能地这可能取决于具体如何实现的逻辑。我想指出的一点是,在CSS3中,如果人们希望并计划好类的顺序,那么类的顺序是有意义的,而且以这种方式利用CSS的功能可能不会有什么可怕的错误

发表评论