我知道CSS选择器具有最高的优先级(即.classname< #idname)。
.classname
#idname
我还知道,如果事物具有相同的特异性,那么最后一个调用的语句将具有优先权:
.classname1 { color: red; } .classname1 { color: blue; } // classname1 color will be blue
HTML类在DOM元素上的排序是否会影响语句优先级?
我不得不不同意乔恩和沃森的回答,因为…
您的问题是:
CSS类在DOM元素上的排序是否会影响语句优先级?
哪个确实取决于所讨论的语句。
HTML排序通常不重要
当直接调用一个类(即或)或组合调用(即或)时,以下 是等效的 :.class1``.class2``.class1.class2``.class2.class1
.class1``.class2``.class1.class2``.class2.class1
<div class="class1 class2"></div> <div class="class2 class1"></div>
可以基于HTML顺序影响上述HTML的语句优先级的情况
在HTML中进行排序最重要的地方是在CSS中使用 属性 选择器。
示例1:使用以下代码尝试 与 属性值 匹配的 提琴手将不会对字体颜色进行任何更改,并且div由于类的顺序,每个字体都会具有不同的属性:
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使用以下代码尝试 与 属性值的 末尾匹配的 不会对first的字体颜色进行任何更改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]语法查找的代码组合。
[attr*=value]
这一切太复杂了吗?可能吧 这可能取决于确切实现方式的逻辑。我想带出的一点是,它是可能的CSS3有类排序是显著如果需要的话,并计划于它,它可能不是 _可怕的_错误要利用CSS的权力的方式。