權(quán)重規(guī)則概述：

1. !important 優(yōu)先級最高，但也會被權(quán)重高的important所覆蓋
2. 行內(nèi)樣式總會覆蓋外部樣式表的任何樣式(除了!important)
3. 單獨使用一個選擇器的時候，不能跨等級使css規(guī)則生效
4. 如果兩個權(quán)重不同的選擇器作用在同一元素上，權(quán)重值高的css規(guī)則生效
5. 如果兩個相同權(quán)重的選擇器作用在同一元素上：以后面出現(xiàn)的選擇器為最后規(guī)則.
6. 權(quán)重相同時，與元素距離近的選擇器生

權(quán)重等級劃分：

• !important;

• 行內(nèi)樣式;

• ID選擇器, 權(quán)重:100;

• class,屬性選擇器和偽類選擇器，權(quán)重:10;

屬性選擇器指的是:根據(jù)元素的屬性及屬性值來選擇元素，比如button的type屬性等。 偽類選擇器: :active :focus等選項

• 標(biāo)簽選擇器和偽元素選擇器，權(quán)重:1;

偽元素選擇器： :before :after

一句話總結(jié)：

!important > 行內(nèi)樣式 > ID選擇器 > (類選擇器 | 屬性選擇器 | 偽類選擇器 )> 元素選擇器

CSS選擇起權(quán)重優(yōu)先級到底做什么的：

在同一個元素使用不同的方式，聲明了相同的一條或多條css規(guī)則，瀏覽器會通過權(quán)重來判斷哪一種方式的聲明，與這個元素最為相關(guān)，從而在該元素上應(yīng)用這個聲明方式聲明的所有css規(guī)則。深刻理解css權(quán)重，能夠減少調(diào)試css規(guī)則的時間。

使用細(xì)則：

1. 不推薦使用!important；

2. 行內(nèi)樣式總會覆蓋外部樣式表的任何樣式,會被!important覆蓋；

3. 單獨使用一個選擇器的時候，不能跨等級使css規(guī)則生效

無論多少個class組成的選擇器，都沒有一個ID選擇器權(quán)重高(據(jù)張鑫旭大神說256個class選擇器可以干掉1個id選擇器)。類似的，無論多少個元素組成的選擇器，都沒有一個class選擇器權(quán)重高、無論多少個ID組成的選擇器，都沒有行內(nèi)樣式權(quán)重高。
傳送門 在demo中使用了11個class組成一個選擇器，最后還是一個ID選擇器，設(shè)置的樣式生效

4. 如果兩個權(quán)重不同的選擇器作用在同一元素上，權(quán)重值高的css規(guī)則生效

經(jīng)過權(quán)重值計算得到的權(quán)重值越大，則認(rèn)為這個選擇器的權(quán)重高

.test #test{ } // id 100+class 10=110;
.test #test span{} // id 100+class 10+span 1=111;
.test #test .sonClass{} // id 100+class 10+class 10=120; //生效

5. 如果兩個相同權(quán)重的選擇器作用在同一元素上：以后面出現(xiàn)的選擇器為最后規(guī)則

<div id="app">
  <div class="test" id="test">
    <span >啦啦啦</span>
  </div>
</div>
#test span{
   color:blue;
}
#app span{ // 生效 因為后面出現(xiàn)
   color: red;
}

6. 權(quán)重相同時，與元素距離近的選擇器生效

#content h1 { // css樣式表中
   padding: 5px;
}
<style type="text/css">
   #content h1 { // html頭部 因為html頭部離元素更近一點，所以生效
     padding: 10px;
  }
</style>