我知道CSS选择器具有最高的优先级（即.classname< #idname）。我还知道，如果事物具有相同的特异性，那么最后一个调用的语句将具有优先权：.classname1 { color: red; }.classname1 { color: blue; } // classname1 color will be blueHTML类在DOM元素上的排序是否会影响语句优先级？
3 回答
侃侃尔雅
TA贡献1801条经验 获得超15个赞
我不得不不同意乔恩和沃森的回答，因为...
是的，可以（取决于声明）
您的问题是：
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使用以下代码尝试与属性值的末尾匹配的Fiddle不会对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]语法查找的代码组合。
这一切太复杂了吗？可能吧。这可能取决于确切实现方式的逻辑。我想带出的一点是，它是可能的CSS3有类排序是显著如果需要的话，并计划于它，它可能不是可怕的错误要利用CSS的权力的方式。
- 3 回答
- 0 关注
- 583 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消