CSS权限优先级的计算

当一个前端项目超过3年，开发人员换过一波之后，你会发现维护前辈留下的代码很是头疼，比如：样式，在层层追加的下面，恨不得用3个important来强调，然而没有用。那么下面对css 样式权重的说明：

1、优先级分为6大类

从高到低：
1:无条件优先的属性：!important。会覆盖页面内任何位置定义的元素样式。（慎重使用）
2:标签上直接添加内联样式(style)：<div style={width:'100px'}></div>。(少用，不方便统一管理)
3:标签上有id,并且用id设置样式：#id{margin:'2px'}会覆盖className{margin:'4px'}
4:直接用标签名称设置样式：span{fontSize:'12px'}会被className{fontSize:'14px'}覆盖
5:标签名称（直接用选择器定义）：li{color:'#ddd'}会覆盖通配选择器*{color:'#000'}
6:通配选择器
总结：Important>style={}(行内样式)>#id（ID选择器）>.class(类选择器)>标签选择器>通配选择器
1：层叠性：多种css样式的叠加，如果一个属性通过两个相同的选择器设置到同一个元素上，那么这个时候一个属性就会被另一个属性层叠掉
实际开发过程中，经常会出现两个或者多个样式设置在同一个属性上 比如：

<div classname="widthStyle heightStyle">
   <ul classname="ul ulTwo">
    <li classname="li"> </li>
  </ul>
</div>

ulTwo的样式会覆盖ul的样式
a:选择器相同，则执行层叠行
b:选择器不同，就会出现优先级的问题，就会涉及权重计算

2、权重计算方法：

1：权重计算公式：
!important:--------Infinity；
行内样式：-------- 1000；（1000，100，10,1代表的是位数）
id: -------------------- 100；
class|属性|伪类 --- 10；
标签|伪元素 -----------1；
通配符 ---------------- 0；

<div class="loading-wrap">
   <li class="li-name"></li>
</div>
<style>
  .loading-wrap{/*权重：0010*/
      width: 100%;
      color: #fff;
      .li-name{/*权重：0020*/
        color:#ddd
      }
      li{/*权重：0011*/
        color:#ccc!important;/*权重：最高级*/
      }
  }
</style>