CSS选择器权重比较的笔记总结
几类常用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选择器的比较应该是采用第二种,个人在今后未探究到真谛之前,也将使用这样的比较方式去判断(废话)……
下一篇: 【1】pytorch基础