當(dāng)一個(gè)前端項(xiàng)目超過3年，開發(fā)人員換過一波之后，你會(huì)發(fā)現(xiàn)維護(hù)前輩留下的代碼很是頭疼，比如：樣式，在層層追加的下面，恨不得用3個(gè)important來強(qiáng)調(diào)，然而沒有用。那么下面對(duì)css 樣式權(quán)重的說明：

1、優(yōu)先級(jí)分為6大類

從高到低：
1:無條件優(yōu)先的屬性：!important。會(huì)覆蓋頁面內(nèi)任何位置定義的元素樣式。（慎重使用）
2:標(biāo)簽上直接添加內(nèi)聯(lián)樣式(style)：<div style={width:'100px'}></div>。(少用，不方便統(tǒng)一管理)
3:標(biāo)簽上有id,并且用id設(shè)置樣式：#id{margin:'2px'}會(huì)覆蓋className{margin:'4px'}
4:直接用標(biāo)簽名稱設(shè)置樣式：span{fontSize:'12px'}會(huì)被className{fontSize:'14px'}覆蓋
5:標(biāo)簽名稱（直接用選擇器定義）：li{color:'#ddd'}會(huì)覆蓋通配選擇器*{color:'#000'}
6:通配選擇器
總結(jié)：Important>style={}(行內(nèi)樣式)>#id（ID選擇器）>.class(類選擇器)>標(biāo)簽選擇器>通配選擇器
1：層疊性：多種css樣式的疊加，如果一個(gè)屬性通過兩個(gè)相同的選擇器設(shè)置到同一個(gè)元素上，那么這個(gè)時(shí)候一個(gè)屬性就會(huì)被另一個(gè)屬性層疊掉
實(shí)際開發(fā)過程中，經(jīng)常會(huì)出現(xiàn)兩個(gè)或者多個(gè)樣式設(shè)置在同一個(gè)屬性上 比如：

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

ulTwo的樣式會(huì)覆蓋ul的樣式
a:選擇器相同，則執(zhí)行層疊行
b:選擇器不同，就會(huì)出現(xiàn)優(yōu)先級(jí)的問題，就會(huì)涉及權(quán)重計(jì)算

2、權(quán)重計(jì)算方法：

1：權(quán)重計(jì)算公式：
!important:--------Infinity；
行內(nèi)樣式：-------- 1000；（1000，100，10,1代表的是位數(shù)）
id: -------------------- 100；
class|屬性|偽類 --- 10；
標(biāo)簽|偽元素 -----------1；
通配符 ---------------- 0；

<div class="loading-wrap">
   <li class="li-name"></li>
</div>
<style>
  .loading-wrap{/*權(quán)重：0010*/
      width: 100%;
      color: #fff;
      .li-name{/*權(quán)重：0020*/
        color:#ddd
      }
      li{/*權(quán)重：0011*/
        color:#ccc!important;/*權(quán)重：最高級(jí)*/
      }
  }
</style>