原文
大綱
1筋蓖、CSS層疊
2、CSS權(quán)重
3祠饺、權(quán)重等級(jí)
4、權(quán)重的規(guī)則
5汁政、!important
1道偷、CSS層疊
CSS全稱：層疊樣式表 (Cascading Style Sheets)，有層級(jí)的记劈、相互疊加的樣式勺鸦。
1、找到所有作用于元素和屬性的聲明
2目木、一個(gè)樣式是否作用于元素依賴于這個(gè)樣式的權(quán)重以及樣式來源的順序
說明：來源的順序：這個(gè)樣式來源于行內(nèi)樣式换途、還是外部引入樣式亦或者是瀏覽器默認(rèn)的樣式
2、CSS權(quán)重
權(quán)重決定了你css規(guī)則怎樣被瀏覽器解析直到生效嘶窄』初耍“css權(quán)重關(guān)系到你的css規(guī)則是怎樣顯示的”。
當(dāng)很多的規(guī)則被應(yīng)用到某一個(gè)元素上時(shí)柄冲，權(quán)重是一個(gè)決定哪種規(guī)則生效吻谋，或者是優(yōu)先級(jí)的過程。
每個(gè)選擇器都有自己的權(quán)重现横。你的每條css規(guī)則漓拾，都包含一個(gè)權(quán)重級(jí)別。 這個(gè)級(jí)別是由不同的選擇器加權(quán)計(jì)算的戒祠，通過權(quán)重骇两，不同的樣式最終會(huì)作用到你的網(wǎng)頁中 。
如果兩個(gè)選擇器同時(shí)作用到一個(gè)元素上姜盈，權(quán)重高者生效低千。
權(quán)重的不同，是你所期望的效果馏颂，沒有通過css規(guī)則在元素上生效的主要原因示血。
權(quán)重的級(jí)別根據(jù)選擇器被劃分為四個(gè)分類：行內(nèi)樣式，id救拉，類與屬性难审，以及元素。
如果兩個(gè)選擇器權(quán)重值相同亿絮，則最后定義的規(guī)則被計(jì)算到權(quán)重中(后面定度的CSS規(guī)則權(quán)重要更大告喊，會(huì)取代前面的CSS規(guī)則)麸拄。
如果一條規(guī)則包含了更高權(quán)重的選擇器，那么這個(gè)規(guī)則權(quán)重更高黔姜。
內(nèi)聯(lián)樣式表含有比別的規(guī)則更高的權(quán)重拢切。
3、權(quán)重等級(jí)
每個(gè)選擇器在權(quán)重級(jí)別中都有自己涇渭分明的位置地淀。根據(jù)選擇器種類的不同可以分為四類失球，也決定了四種不同等級(jí)的權(quán)重值。
從0開始帮毁，一個(gè)行內(nèi)樣式+1000，一個(gè)id+100豺撑，一個(gè)屬性選擇器/class或者偽類+10烈疚，一個(gè)元素名，或者偽元素+1.
4聪轿、權(quán)重的規(guī)則
1爷肝、相同的權(quán)重：以后面出現(xiàn)的選擇器為最后規(guī)則：
假如在外部樣式表中，同一個(gè)CSS規(guī)則你寫了兩次陆错，那么出現(xiàn)在前面的選擇器權(quán)重低灯抛，你的樣式會(huì)選擇后面的樣式
#content h1 {
padding: 5px;
}
#content h1 {
padding: 10px;
}
/*
兩個(gè)選擇器的權(quán)重都是0，1音瓷，0对嚼，1，最后那個(gè)規(guī)則生效绳慎。
*/
2纵竖、不同的權(quán)重，權(quán)重值高則生效
選擇器可能會(huì)包含一個(gè)或者多個(gè)與權(quán)重相關(guān)的計(jì)算點(diǎn)杏愤，若經(jīng)過計(jì)算得到的權(quán)重值越大靡砌，則認(rèn)為這個(gè)選擇器的權(quán)重高。
3珊楼、如果兩個(gè)選擇器權(quán)重值相同通殃，則最后定義的規(guī)則被計(jì)算到權(quán)重中(后面定度的CSS規(guī)則權(quán)重要更大，會(huì)取代前面的CSS規(guī)則)
5厕宗、!important
!important是CSS1就定義的語法画舌，作用是提高指定樣式規(guī)則的應(yīng)用優(yōu)先權(quán)。語法格式{ cssRule !important }媳瞪。
應(yīng)當(dāng)注意的是!important是對整條樣式的聲明骗炉，包括這個(gè)樣式的屬性和屬性值。
非到萬不得已不要用!important蛇受。
參考網(wǎng)址
https://www.w3cplus.com/css/the-important-css-declaration-how-and-when-to-use-it.html
https://www.w3cplus.com/css/css-specificity-things-you-should-know.html
