相思资源网 Design By www.200059.com

方式一:值相加
 

我们先去MDN看看官方的解释:

优先级是如何计算的?

优先级就是分配给指定的 CSS 声明的一个权重,它由 匹配的选择器中的 每一种选择器类型的 数值 决定。

而当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候,CSS 中最后的那个声明将会被应用到元素上。

当同一个元素有多个声明的时候,优先级才会有意义。因为每一个直接作用于元素的 CSS 规则总是会接管/覆盖(take

over)该元素从祖先元素继承而来的规则。

我们从上面一段描述中得到个很重要的信息: 权重

我们再来看选择器优先级关系:ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器。

看来真相已经呼之欲出了。

我们只要给不同类型的选择器设定一个权重值,然后在根据选择器的数量进行相加,就很容易得出优先级,例如:

ID选择器的权重值设为 1000

类选择器 、属性选择器 、伪类选择器的权重值设为 100

标签选择器、伪元素选择器的权重值设为 10

我们可以很快速的计算出下面这段CSS的权重值并作出正确的判断。

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

可是。。。细心的你可能会发现只要低优先级的选择器数量足够多(例如: .item...x200 {} ),那么低优先级的权重值就可以超过高优先级的权重值,但实际效果其实还是以高优先级样式为准。当出现这种情况时可能用现在的权重值计算方式就无法解释了!

当然可以通过限制选择器的最大数量及拉大选择器的权重值数值还是可以解释的,但我总觉得这不是一种好的实现方式。

方式二:bit位存储

我们假设权重值是用 unsigned int 变量存储,那么该变量的 bit 位一共有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,优先级,css,优先级理解方式

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“CSS优先级的两种理解方式”

暂无CSS优先级的两种理解方式的评论...

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。