CSS叫做層疊樣式表
Cascading Style Sheets
層疊樣式的概念是非常重要的，在最基礎的層面上表示了CSS規則的順序很重要，但是它更加複雜。什麼選擇器在層疊中勝出取決于三個因素
重要性 importance
專有性 specificity
源代碼次序 source order
重要性
CSS中，有一個特殊的文法享有絕對優先級 ! important 把他加載在屬性值的後面，可以讓這條聲明擁有最高優先級。
字元字元字元字元字元字元
p {
color:red ! important;
}
#app {
color:black
}
一旦設定了 !important，那麼源代碼次序即使是在後面，也不會起效果。同時，專有性也不會其效果。
但也并非絕對
如果你合理的利用 源代碼次序和重要性這兩個特性，
字元字元字元字元字元字元
p {
color:red ! important;
}
#app {
color:black ! important
}
(不建議)(不建議)(不建議)(不建議)(不建議)(不建議)
由于大家都是!important 而且按照 源代碼次序，那麼後來的color一定會把前面的顔色給覆寫掉。
(不建議) (不建議)(不建議)(不建議)
因為大量的事實證明 ！important 本身的出現往往是不得已而為之的情況，也就是說隻有到了你不得不使用它(事實證明，極少出現這種情況，往往是因為懶)。
為什麼重要性 !important 不建議使用？
因為 !important 很重要的一點是，他改變了另外兩條CSS的層疊規則！
一旦使用了絕對權力的 !important ，層疊順序就會亂了套，在大型項目中往往會出現很多不可預期的錯誤。
專有性
專有性是基本上衡量選擇器具體成都的一種辦法 --- 它能夠比對多少元素
不同的選擇器對應的優先級完全不同，其中ID選擇器是最高的。
選擇器
千位
百位
十位
個位
總計值
H1
1
0001
#id
1
0100
h1+p::first-letter
3
0003
li>a[name='demo'] > .inline
2
2
0022
無選擇器，位于style屬性中
1
1000
注意 通用選擇器(*) 符合選擇器(+ > ~ '')以及否定選擇僞類(:not) 不會影響優先級。
不過由于他們之後往往都跟随者其它選擇器，是以還是要注意。
源代碼次序
如果比較了 重要性和專有性 之後，依然沒有比較出來誰勝利，那麼久按照後來者優先，由 源代碼次序來決定獲勝。
混合規則
注意！！！ 注意！！！
以上所有的規則均沒有優先級之分，也就是說三個規則會同時其效果，層疊樣式才是最佳實踐。
前面所說的，我們利用 !important來重寫後面的規則，其實就是破壞了層疊的順序(源代碼次序淩駕于!important之上)，導緻了誰靠後引入，誰就更高優先級。
字元字元字元字元字元字元
p {
color:red ! important;
}
#app {
color:black ! important
}