之前寫頁面樣式時，有時會遇到 用多條樣式定義規則對同一個元素進行樣式設置的時候，當時想到的就是 按css選擇器的優先級來搞定這個問題，說實話當時也就只記得 內嵌樣式 > id > class > 標簽 這樣簡單的規則，雖然基本可以搞定需求，也自以為然的就是這個樣子了，直到前兩天有個面試問到了這個問題，我也是按自以為的這個簡單規則進行了描述，當問到我是否對“權重”有所了解時，恕我直言，當時就懵了，“權重”是什么鬼，沒聽過啊，好尷尬....(恕我學習時不太仔細，同仁勿噴哈)，作為一名出色的前端工程師，前端的東西怎么還可能有沒聽過的，在這兒不說面試結果咋樣了哈，回來我就發奮圖強了，各種查資料 終於了解“權重”是個什么東西，頓時對css選擇器優先級的由來有了深一層的認識，下面是我的一些總結，記錄一下，加深理解：
1. 權重概念：
權重，是一個相對的概念，是針對某一指標而言。某一指標的權重是指該指標在整體評價中的相對重要程度。
權重系數，是表示某一指標項在指標項系統中的重要程度，它表示在其它指標項不變的情況下，這一指標項的變化，對結果的影響。
2.css權重的理解：
每一個css的選擇器都有一個相對的重要程度值，也就是權重的值，簡稱“權值”；
css通過css選擇器的權重占比，來計算css選擇規則的總權值，從而確定 定義樣式規則的 優先級次序；
從“css權重的理解”中得知，原來所謂為的 css選擇規則的優先級 是按照 css選擇器的權值的比較 來確定的（可能光看這句還是一頭霧水的，不急，看完我接下來介紹 估計你馬上會有豁然開朗的感覺，但，請先記住這句話）；
3.css優先級規則：
1.css選擇規則的權值不同時，權值高的優先；
2.css選擇規則的權值相同時，后定義的規則優先；
3. css屬性后面加 !important 時，無條件絕對優先；
4. 權值的計算：
網上很容易找到這張圖，他描述了css選擇器的權值等級划分：
權值等級划分， 一般來說是划分4個等級：
第一等級：代表 內聯樣式，如 style=""，權值為 1,0,0,0；
第二等級：代表 ID選擇器，如 #id="", 權值為 0,1,0,0；
第三等級：代表 calss | 偽類 | 屬性 選擇器，如 .class | :hover,:link,:target | [type], 權值 0,0,1,0；
第四等級：代表 標簽 | 偽元素 選擇器，如 p | ::after, ::before, ::fist-inline, ::selection, 權值 0,0,0,1；
此外，通用選擇器（*），子選擇器（>）， 相鄰同胞選擇器（+）等選擇器不在4等級之內，所以它們的權值都為 0,0,0,0；
權值計算 公式：
權值 = 第一等級選擇器*個數，第二等級選擇器*個數，第三等級選擇器*個數，第四等級選擇器*個數；
權值比較 規則：
當兩個權值進行比較的時候，是從高到低逐級將等級位上的權重值（如 權值 1,0,0,0 對應--> 第一等級權重值，第二等級權重值，第三等級權重值，第四等級權重值）來進行比較的，而不是簡單的 1000*個數 + 100*個數 + 10*個數 + 1*個數 的總和來進行比較的，換句話說，低等級的選擇器，個數再多也不會越等級超過高等級的選擇器的優先級的;【為什么這么特別強調呢，因為為在網上查資料的時候，看到好多博客是把這個權重值理解成了所有等級的數字之和了】，說到這里 再 配合下圖 大家應該就差不多理解了，
總結，這個比較規則就是三點
1.先從高等級進行比較，高等級相同時，再比較低等級的，以此類推；
2.完全相同的話，就采用 后者優先原則（也就是樣式覆蓋）；
3.css屬性后面加 !important 時，無條件絕對優先（比內聯樣式還要優先）；
驗證 第一點：
例子：
<!DOCTYPE html>
<html>
<head>
<title>CSS 選擇器</title>
<style type="text/css"> #parent p { background-color: red; } div .a.b.c.d.e.f.g.h.i.j.k p{ background-color: green;
</style>
</head>
<body>
<div id="parent">
<div class="a b c d e f g h i j k">
<p>xxxx</p>
</div>
</div>
</body>
</html>
如果對css權重理解不透徹的話，看到上邊的例子，估計會有很大一部分人都會認為最后 p 的背景色是 green; 為什么呢? 因為理解成了錯誤的權值計算規則
qz1 = 100 + 1 = 101
qz2 = 1 + 10*11 + 1 = 112
qz1 < qz2
所以 第二條樣式 優先級高，背景色為 green；
NO,NO,NO....結果卻是 背景色為 red；如圖：
所以也就印證了，上面所說的權值比較規則 第一條。
驗證 第二點：
例子：
<!DOCTYPE html>
<html>
<head>
<title>CSS 選擇器</title>
<style type="text/css">
/* 1.先從高等級進行比較，高等級相同時，再比較低等級的，以此類推， 2.完全相同的話，就采用 后者優先原則（也就是樣式覆蓋）， 3.有 !important 時，無條件絕對優先 如下面的 示例： */ #parent #child1 {background-color: red;} /* 權值: 0,2,0,0; */ #parent #child1 {background-color: green;} /* 權值: 0,2,0,0; */
</style>
</head>
<body>
<div id="parent">
<div id="child1">xxxxxx</div>
</div>
</body>
</html>
展示效果，如圖：
所以也就印證了，上面所說的權值比較規則 第二條；
驗證 第三點：
例子：
<!DOCTYPE html>
<html>
<head>
<title>CSS 選擇器</title>
<style type="text/css">
/* 1.先從高等級進行比較，高等級相同時，再比較低等級的，以此類推， 2.完全相同的話，就采用 后者優先原則（也就是樣式覆蓋）， 3.有 !important 時，無條件絕對優先 如下面的 示例： */ #parent div#child1 { background-color: yellow !important; } /* !important 無條件絕對優先 */ #parent div#child1 {background-color: red;} /* 權值: 0,2,0,1; */ #parent #child1 {background-color: green;} /* 權值: 0,2,0,0; */
</style>
</head>
<body>
<div id="parent">
<div id="child1" style="background-color:orange;">xxxxxx</div> <!-- 權值：1, 0, 0, 0 -->
<div id="child2">xxxxxx</div>
</div>
</body>
</html>
如果沒有 !important 的樣式規則時，相信大家都知道內聯樣式的優先級是最高的，背景色為 orange；
加了 !important 之后，沒有任何理由的 它的優先級就最高了，背景色為 yellow;
展示效果, 如圖：
所以也就印證了，上面所說的權值比較規則 第三條；
5. 選擇器的優先級：
通過上邊的分析 我們就得出了單個選擇器的優先級比較：
css屬性!important
》內聯樣式
》ID選擇器(#id)
》類選擇器(.class) = 偽類選擇器(:hover等) = 屬性選擇器[type等]
》元素選擇器(p等) = 偽元素選擇器(:after/:before/::selection等)
》通用選擇器(*)
》繼承的樣式
關於偽類的部分，這篇文章總結還挺好的（尤其是 :not(選擇器) 偽類不參與優先級計算，但:not(選擇器) 里邊的 “選擇器” 是參與優先級計算的 這部分），可參考：
地址：https://www.cnblogs.com/starof/p/4387525.html
簡單說一下繼承：
繼承是一種機制，它允許樣式不僅可以應用於某個特定的元素，還可以應用於它的后代。例如一個BODY定義了的顏色值也會應用到段落的文本中。下面舉例說明：
樣式定義：body{ color:red; }
應用舉例代碼：<p>CSS的<strong>層疊和繼承</strong>深入探討</p>
這段代碼的應用結果是：“CSS的層疊和繼承深入探討”這段話是紅顏色的，“層疊和繼承”由於應用了strong元素，所以是粗體。這很符合制作者的意圖，也是為什么繼承是CSS的一部分的原因。
我去，又兩點半拉，我還沒娶媳婦，不想死辣么早，就寫這些吧，估計大家通篇讀下來，應該也明白的差不多了，還有不理解的地方，歡迎留言哈！！愛生活，愛自己，晚安！！