CSS优先级的两种理解方式

网页制作 2024/10/6 佚名

3 2 1

无为清净楼资源网 Design By www.qnjia.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,优先级理解方式

标签：

css,优先级,css,优先级理解方式

无为清净楼资源网 Design By www.qnjia.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

无为清净楼资源网 Design By www.qnjia.com

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

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年10月06日

CSS优先级的两种理解方式

css,优先级,css,优先级理解方式

css实现3d立体魔方的示例代码

CSS实现多层嵌套结构最外层旋转其它层不旋转效果

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

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接