CSS優先級

---

直觀

1. 行內樣式>內聯樣式=外聯樣式
2. ID選擇器>類選擇器=偽類選擇器=屬性選擇器>元素選擇器=偽元素選擇器>通配符選擇器
3. !important申明的優先級最高
4. 就近原則（最晚聲明的生效）

微觀

1. !important權重最高 1,0,0,0,0
2. 行內樣式 0,1,0,0,0
3. ID選擇器 0,0,1,0,0
4. 類、偽類、屬性選擇器 0,0,0,1,0
5. 元素、偽元素選擇器 0,0,0,0,1

規則：累加不進位。

  a{color: yellow;} /*特殊性值：0,0,0,1*/
  div a{color: green;} /*特殊性值：0,0,0,2*/
  .demo a{color: black;} /*特殊性值：0,0,1,1*/
  .demo input[type="text"]{color: blue;} /*特殊性值：0,0,2,1*/
  .demo *[type="text"]{color: grey;} /*特殊性值：0,0,2,0*/
  #demo a{color: orange;} /*特殊性值：0,1,0,1*/
  div#demo a{color: red;} /*特殊性值：0,1,0,2*/

注： 因為就近原則 :link、:visited、:hover、:active,必須按此順序聲明。因為在hover狀態時肯定是link狀態，在active狀態時肯定是link和hover狀態

參考資料

https://www.cnblogs.com/wangmeijian/p/4207433.html
http://www.runoob.com/w3cnote/css-style-priority.html