原文

　　簡書原文：https://www.jianshu.com/p/b083556e7968

大綱

　　1、CSS層疊
　　2、CSS權重
　　3、權重等級
　　4、權重的規則
　　5、!important

1、CSS層疊

　　CSS全稱：層疊樣式表 (Cascading Style Sheets)，有層級的、相互疊加的樣式。
　　　　1、找到所有作用於元素和屬性的聲明
　　　　2、一個樣式是否作用於元素依賴於這個樣式的權重以及樣式來源的順序
　　說明：來源的順序：這個樣式來源於行內樣式、還是外部引入樣式亦或者是瀏覽器默認的樣式

2、CSS權重

　　權重決定了你css規則怎樣被瀏覽器解析直到生效。“css權重關系到你的css規則是怎樣顯示的”。
　　當很多的規則被應用到某一個元素上時，權重是一個決定哪種規則生效，或者是優先級的過程。
　　每個選擇器都有自己的權重。你的每條css規則，都包含一個權重級別。 這個級別是由不同的選擇器加權計算的，通過權重，不同的樣式最終會作用到你的網頁中 。
　　如果兩個選擇器同時作用到一個元素上，權重高者生效。
　　權重的不同，是你所期望的效果，沒有通過css規則在元素上生效的主要原因。
　　權重的級別根據選擇器被劃分為四個分類：行內樣式，id，類與屬性，以及元素。
　　如果兩個選擇器權重值相同，則最後定義的規則被計算到權重中(後面定度的CSS規則權重要更大，會取代前面的CSS規則)。
　　如果一條規則包含了更高權重的選擇器，那麽這個規則權重更高。
　　內聯樣式表含有比別的規則更高的權重。

3、權重等級

　　每個選擇器在權重級別中都有自己涇渭分明的位置。根據選擇器種類的不同可以分為四類，也決定了四種不同等級的權重值。
　　從0開始，一個行內樣式+1000，一個id+100，一個屬性選擇器/class或者偽類+10，一個元素名，或者偽元素+1.

4、權重的規則

　　1、相同的權重：以後面出現的選擇器為最後規則：
　　　　假如在外部樣式表中，同一個CSS規則你寫了兩次，那麽出現在前面的選擇器權重低，你的樣式會選擇後面的樣式

#content h1 {
  padding: 5px;
}
#content h1 {
  padding: 10px;
}
/*
    兩個選擇器的權重都是0，1，0，1，最後那個規則生效。
*/

　　2、不同的權重，權重值高則生效
　　　　選擇器可能會包含一個或者多個與權重相關的計算點，若經過計算得到的權重值越大，則認為這個選擇器的權重高。
　　3、如果兩個選擇器權重值相同，則最後定義的規則被計算到權重中(後面定度的CSS規則權重要更大，會取代前面的CSS規則)

5、!important

　　!important是CSS1就定義的語法，作用是提高指定樣式規則的應用優先權。語法格式{ cssRule !important }。
　　應當註意的是!important是對整條樣式的聲明，包括這個樣式的屬性和屬性值。
　　非到萬不得已不要用!important。

參考網址

　　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

CSS權重