權重規則概述：
- !important 優先級最高，但也會被權重高的important所覆蓋
- 行內樣式總會覆蓋外部樣式表的任何樣式(除了!important)
- 單獨使用一個選擇器的時候，不能跨等級使css規則生效
- 如果兩個權重不同的選擇器作用在同一元素上，權重值高的css規則生效
- 如果兩個相同權重的選擇器作用在同一元素上：以后面出現的選擇器為最后規則.
- 權重相同時，與元素距離近的選擇器生
權重等級劃分：
-
!important;
-
行內樣式;
-
ID選擇器, 權重:100;
-
class,屬性選擇器和偽類選擇器，權重:10;
屬性選擇器指的是:根據元素的屬性及屬性值來選擇元素，比如button的type屬性等。 偽類選擇器: :active :focus等選項
-
標簽選擇器和偽元素選擇器，權重:1;
偽元素選擇器： :before :after
一句話總結：
!important > 行內樣式 > ID選擇器 > (類選擇器 | 屬性選擇器 | 偽類選擇器 )> 元素選擇器
CSS選擇起權重優先級到底做什么的：
在同一個元素使用不同的方式，聲明了相同的一條或多條css規則，瀏覽器會通過權重來判斷哪一種方式的聲明，與這個元素最為相關，從而在該元素上應用這個聲明方式聲明的所有css規則。深刻理解css權重，能夠減少調試css規則的時間。
使用細則：
-
不推薦使用!important；
-
行內樣式總會覆蓋外部樣式表的任何樣式,會被!important覆蓋；
-
單獨使用一個選擇器的時候，不能跨等級使css規則生效
無論多少個class組成的選擇器，都沒有一個ID選擇器權重高(據張鑫旭大神說256個class選擇器可以干掉1個id選擇器)。類似的，無論多少個元素組成的選擇器，都沒有一個class選擇器權重高、無論多少個ID組成的選擇器，都沒有行內樣式權重高。
傳送門 在demo中使用了11個class組成一個選擇器，最后還是一個ID選擇器，設置的樣式生效
-
如果兩個權重不同的選擇器作用在同一元素上，權重值高的css規則生效
經過權重值計算得到的權重值越大，則認為這個選擇器的權重高
.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; //生效
-
如果兩個相同權重的選擇器作用在同一元素上：以后面出現的選擇器為最后規則
<div id="app">
<div class="test" id="test">
<span >啦啦啦</span>
</div>
</div>
#test span{
color:blue;
}
#app span{ // 生效 因為后面出現
color: red;
}
-
權重相同時，與元素距離近的選擇器生效
#content h1 { // css樣式表中
padding: 5px;
}
<style type="text/css">
#content h1 { // html頭部 因為html頭部離元素更近一點，所以生效
padding: 10px;
}
</style>
