欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CSS选择器权重比较的笔记总结

程序员文章站 2022-07-04 20:05:12
...

几类常用CSS选择器


以下他们单独作用在元素上的效果

行间样式:

<div style="background-color:block;">黑色背景</div>

id选择器:

#box{ background-color:blue; } 

<div id="box">蓝色背景</div>

class选择器(伪类选择器不列举):

.box1{ background-color:red; } 

<div class="box1">红色背景</div>

标签选择器(伪元素选择器不列举):

div{ backgorund-color:pink; }

<div>粉色背景</div>

通配符选择器:

*{ background-color:green; } 

<div>绿色背景</div>

 

综合作用在同一元素上的效果

#box{ background-color:blue; } 
.box1{ background-color:red; } 
div{ backgorund-color:pink; } 
*{ background-color:green; } 
<!--省略其他页面结构--> 

<div id="box" class="box1" style="background-color:block;">黑色背景</div>

结果将很明显是黑色背景。

 

为什么?

因为CSS选择器权重之间的比较!单从以上,可以得出在权重的比较上:行间样式>id选择器>class选择器和伪类选择器>标签选择器和伪元素选择器>通配符选择器,这样的初步结论,但是这在复杂选择器组合中很不适用!详细参考各种多层级的复杂选择器。

 

 

 

选择器权重


权重是什么?可以理解为CSS样式应用在HTML元素上的优先级。详细定义什么的,很多了。

 

CSS权重的表示:n,n,n,n

行间样式:1,0,0,0

id选择器:0,1,0,0

class选择器/伪类选择器:0,0,1,0

标签选择器/伪元素选择器:0,0,0,1

通配符选择器:0,0,0,0

 

CSS权重的比较方式:

一、网传:数值相加比较

1个id的权重就是1000,两个就是2000,以此类推,一个class是100,两个是200,tag是10,*(星号)是0,

注:有一个“!important",写在属性后面,它的权重是10000.

这种方式,确实很好的反应了权重比较的结果,

比如:

(1) #box .name div.age{ background:grey; } 的权重可以认为是1000+100+10+100=1210;

(2) .class div div#sex div{ background:block; } 的权重可以认为是100+10+10+1000+10=1130;

如果两组选择器选出的是同一个div元素,那么由于1210>1130,该div的背景颜色会被设置为灰色,而不是黑色。

 

这里有一个问题,就是这里的10000,1000,100,10,0这些数字的进制是多少?

当然不会是十进制,这个很好测试出来,也不是十六进制,也不是三十二进制……

(能力有限,本人测试的最高进制为259,即259层div和1个id选择器比较,此时仍然使用id选择器定义的样式!!!!)

因此,私以为,这种比较方式虽然能解决问题,但其实似乎并不是很靠谱……

 

二、网传:顺序按位比较(个人称呼)

即选择器的权重为四位,从左往右,依次对比相同位上的数值大小,相同则比较下一位。

比如:

id选择器的权重位:0,1,0,0

class选择器的权重为:0,0,1,0

 

还是上面的例子

(1) #box .name div.age{ background:grey; } 的权重可以认为是 0,1,(1+1),1 =》0,1,2,1;

(2) .class div div#sex div{ background:block; } 的权重可以认为是 0,1,1,(1+1+1) =》 0,1,1,3;

 

比较时,先比较左边第一位,都是0,

比较下一位,都是1,

再比较下一位,此时(1)在此为的权重为2,(2)在此位的权重为1,

后面一位便不再比较,直接使用(1)定义的样式。

 

使用此种比较方式有一点好处就是,不必考虑选择器的权重数值的进制。

 

 

 

总结:CSS选择器的权重真让人纠结,要是有大神有权重的权威解释,希望能给个提示,抱拳。

私以为,CSS选择器的比较应该是采用第二种,个人在今后未探究到真谛之前,也将使用这样的比较方式去判断(废话)……