CSS叫做層疊樣式表
Cascading Style Sheets
層疊樣式的概念是非常重要的，在最基礎(chǔ)的層面上表示了CSS規(guī)則的順序很重要够庙，但是它更加復(fù)雜伍伤。什么選擇器在層疊中勝出取決于三個因素
- 重要性 importance
- 專有性 specificity
- 源代碼次序 source order
重要性
CSS中乳蛾，有一個特殊的語法享有絕對優(yōu)先級 ! important 把他加載在屬性值的后面抛杨，可以讓這條聲明擁有最高優(yōu)先級够委。
<p id="app">字符字符字符字符字符字符</p>
p {
color:red ! important;
}
#app {
color:black
}
一旦設(shè)置了 !important，那么源代碼次序即使是在后面怖现，也不會起效果茁帽。同時，專有性也不會其效果屈嗤。
但也并非絕對
如果你合理的利用
源代碼次序和重要性這兩個特性潘拨，
<p id="app">字符字符字符字符字符字符</p>
p {
color:red ! important;
}
#app {
color:black ! important
}
（不建議）（不建議）（不建議）（不建議）（不建議）（不建議）
由于大家都是!important 而且按照 源代碼次序，那么后來的color一定會把前面的顏色給覆蓋掉饶号。
（不建議） （不建議）（不建議）（不建議）
因為大量的事實證明 铁追！important 本身的出現(xiàn)往往是不得已而為之的情況，也就是說只有到了你不得不使用它(事實證明茫船，極少出現(xiàn)這種情況琅束，往往是因為懶)。
為什么重要性 !important 不建議使用算谈？
因為 !important 很重要的一點是涩禀，他改變了另外兩條CSS的層疊規(guī)則！
一旦使用了絕對權(quán)力的 !important 然眼，層疊順序就會亂了套埋泵，在大型項目中往往會出現(xiàn)很多不可預(yù)期的錯誤。
專有性
專有性是基本上衡量選擇器具體成都的一種辦法 --- 它能夠匹配多少元素
不同的選擇器對應(yīng)的優(yōu)先級完全不同罪治，其中ID選擇器是最高的。
| 選擇器 | 千位 | 百位 | 十位 | 個位 | 總計值 |
|---|---|---|---|---|---|
| H1 | 0 | 0 | 0 | 1 | 0001 |
| #id | 0 | 1 | 0 | 0 | 0100 |
| h1+p::first-letter | 0 | 0 | 0 | 3 | 0003 |
| li>a[name='demo'] > .inline | 0 | 0 | 2 | 2 | 0022 |
| 無選擇器礁蔗，位于style屬性中 | 1 | 0 | 0 | 0 | 1000 |
注意 通用選擇器(*) 符合選擇器（+ > ~ ''）以及否定選擇偽類(:not) 不會影響優(yōu)先級觉义。
不過由于他們之后往往都跟隨者其它選擇器，所以還是要注意浴井。
源代碼次序
如果比較了 重要性和專有性 之后晒骇，依然沒有比較出來誰勝利，那么久按照后來者優(yōu)先磺浙，由 源代碼次序來決定獲勝洪囤。
混合規(guī)則
注意！Ｋ貉酢瘤缩！ 注意！Ｂ啄唷剥啤！
以上所有的規(guī)則均沒有優(yōu)先級之分锦溪，也就是說三個規(guī)則會同時其效果，層疊樣式才是最佳實踐府怯。
前面所說的刻诊，我們利用 !important來重寫后面的規(guī)則，其實就是破壞了層疊的順序（源代碼次序凌駕于!important之上）牺丙，導(dǎo)致了誰靠后引入则涯，誰就更高優(yōu)先級。
<p id="app">字符字符字符字符字符字符</p>
p {
color:red ! important;
}
#app {
color:black ! important
}
