CSS优先级的两种理解方式是什么

这篇文章将为大家详细讲解有关CSS优先级的两种理解方式是什么，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

创新互联是一家专注网站建设、网络营销策划、小程序制作、电子商务建设、网络推广、移动互联开发、研究、服务为一体的技术型公司。公司成立十年以来，已经为上1000家成都OPP胶袋各业的企业公司提供互联网服务。现在，服务的上1000家客户与我们一路同行，见证我们的成长；未来，我们一起分享成功的喜悦。

方式一：值相加

我们先去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

关于“CSS优先级的两种理解方式是什么”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容