CSS优先选择级的两种了解方法

日期:2021-01-20 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站

方法1:值相加
 

大家先去MDN看看官方的解释:

优先选择级是怎样测算的?

优先选择级便是分派给特定的 CSS 申明的1个权重,它由 配对的挑选器中的 每种挑选器种类的 标值 决策。

而当优先选择级与好几个 CSS 申明中随意1个申明的优先选择级相同的情况下,CSS 中最终的那个申明可能被运用到元素上。

当同1个元素有好几个申明的情况下,优先选择级才会成心义。由于每个立即功效于元素的 CSS 标准一直会对接/遮盖(take

over)该元素从先祖元素承继而来的标准。

大家从上面1段叙述中获得个很关键的信息内容: 权重

大家再看来挑选器优先选择级关联:ID挑选器 > 类挑选器 = 特性挑选器 = 伪类挑选器 > 标识挑选器 = 伪元素挑选器。

来看实情早已呼之欲出了。

大家要是给不一样种类的挑选器设置1个权重值,随后在依据挑选器的数量开展相加,就很非常容易得出优先选择级,比如:

ID挑选器的权重值设为 1000

类挑选器 、特性挑选器 、伪类挑选器的权重值设为 100

标识挑选器、伪元素挑选器的权重值设为 10

大家能够很迅速的测算出下面这段CSS的权重值并作出正确的分辨。

//权重值1110
#app .menu .item{}
//权重值210
.menu.menu .item{}
//权重值30
.item.item.item{}

但是。。。仔细的你将会会发现要是低优先选择级的挑选器数量充足多(比如: .item...x200 {} ),那末低优先选择级的权重值便可以超出高优先选择级的权重值,但具体实际效果实际上還是以高优先选择级款式为准。当出現这类状况时将会用如今的权重值测算方法就没法解释了!

自然能够根据限定挑选器的最绝大多数量及拉总统大选择器的权重值标值還是能够解释的,但我总感觉这并不是1种好的完成方法。

方法2:bit位储存

大家假定权重值是用 unsigned int 自变量储存,那末该自变量的 bit 位1共有32位(4字节),大家从高位按字节进行以下:

字节1:00000000

字节2:00000000

字节3:00000000

字节4:00000000

按字节和挑选器对应:

字节1:00000000

字节2:00000000 ;ID挑选器

字节3:00000000 ;类挑选器 、特性挑选器 、伪类挑选器

字节4:00000000 ;标识挑选器、伪元素挑选器

同样种类挑选器立即开展个数相加,并填入到特定字节内。

例1:

#app .menu .item{}
 

获得的权重值 bit 位以下:

結果为:65793

例2:

.menu.menu .item{}
 

获得的权重值 bit 位以下:

結果为:513

例3:

.item.item.item{}
 

获得的权重值 bit 位以下:

結果为:3

上面示例中位储存容量仅有8位,因此挑选器的最大限定为255,自然大家能够提升bit位来提升挑选器的最大值。

总结
 

这里详细介绍了2种CSS优先选择级了解方法,你感觉那种更合适你呢?

感兴趣爱好的盆友能够给网编留言,讲出你的念头。

上一篇:CSS操纵网页页面情况色调的编码 返回下一篇:没有了