CSS权重

CSS权重

一般而言,大多数前端工程师对css样式优先级的概念仅仅停留在下一面一张图上:
在这里插入图片描述
权重由高到低>
!important>行间样式>id>class|属性>标签选择器>通配符
基本类型选择器权重

选择器权重
!importantInfinity(无限大)
行列样式1000
Id选择器100
Class选择器/属性/伪类10
标签选择器1
*通配符选择器0 (大于默认样式与继承验样式)
继承样式权重最小(比*通配符还小)

注意:id的权重是100并不是指id的一个权重值就是100,实际上这个100是一个进制数,不是2进制,也不是10进制;而是256进制,就是0到255后+1才是1,列如通配符的权重值0到标签、伪元素的权重值1,中时间实际上差了255。依次类推!
但值得注意的是,!important的权重值虽然是正无穷,但其实也是可也计算的,比如正无穷+1或者*1,就是要比正无穷大,其原理是不管那种语言,在计算机中正无穷的值,都是一个有界的。不是数学上无界的一个慨念!

组合选择器权重
群组选择器: 单独计算
后代,子代,兄弟等选择器:权重相加

演示代码

!important>行列样式权重

在这里插入图片描述

行列样式>id选择器权重

在这里插入图片描述

Id选择器>Class选择器权重

在这里插入图片描述

Class选择器>标签选择器权重

在这里插入图片描述

标签选择器>*通配符选择器权重

在这里插入图片描述

*通配符选择器>继承样式

在这里插入图片描述
在这里插入图片描述

群组选择器

权重单独计算

在这里插入图片描述

权重计算

后代,子代,兄弟等选择器:权重相加

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

就近原则

当权重值相同时,谁和要设置的html标签隔得近,谁的权重就高
在这里插入图片描述

Css选择器优先级判断

当样式冲突时,将根据【权重+就近原则】来判断以谁的样式为准
先判断权重,如果权重相同,再根据就近原则来判断
文章部分参考了作者:Amustlang 的css权重及计算原文地址如下:
https://blog.youkuaiyun.com/qq_36130706/article/details/81415469

如果对你有帮助,请点个赞支持一下,毕竟总结不易

如果有错误的地方欢迎大家在评论区指出,我会及时改正的


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值