CSS权重

CSS权重

一般而言，大多数前端工程师对css样式优先级的概念仅仅停留在下一面一张图上：

权重由高到低>
!important>行间样式>id>class|属性>标签选择器>通配符
基本类型选择器权重

选择器	权重
!important	Infinity(无限大)
行列样式	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

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

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

---