很多朋友对于CSS优先级不是很理解,其实我们能从值相加和bit位存储这两种方式来看,下文的介绍很详细,有需要的有需要的朋友可以了解看看,对大家理解CSS优先级会有一定的帮助。
方式一:值相加
优先级是如何计算的?
优先级就是分配给指定的 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位来提高选择器的最大值。
总结
现在大家对于CSS优先级应该有一定的理解了吧,希望大家阅读完这篇文章能有所收获。最后,想要了解更多CSS优先级的内容,大家可以关注群英网络其它相关文章。
文本转载自脚本之家
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
长按识别二维码并关注微信
更方便到期提醒、手机管理