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.csdn.net/qq_36130706/article/details/81415469
如果对你有帮助，请点个赞支持一下，毕竟总结不易
如果有错误的地方欢迎大家在评论区指出，我会及时改正的