我們先拋出一個問題，CSS 為什麼叫層疊樣式表？這個名字到底有什麼含義呢？要理解它，就需要我們對 CSS 的特性有一些瞭解。
CSS 的一切呈現結果，都是圍繞三大特性展開。
如何更深入的理解，這就需要我們瞭解 CSS 三大特性。由表象昇華到原理，從而寫出更優秀的代碼。
文中會舉出很多小例子，快來動手試試吧！
一、CSS 優先級
CSS 的組成單元是樣式規則，也就是我們常說的 CSS Rule ，正如我們下面看到的這張圖：
眾所周知，CSS 有一個核心特性：當多條樣式規則中的同一個屬性作用到了同一個元素，這些樣式之間就會發生覆蓋。
優先級高的 CSS 樣式，將覆蓋優先級低的 CSS 樣式，成為最終網頁元素的實際樣式。
所以，為了保證頁面有序並且正確的渲染，我們需要了解 CSS 優先級規則。大致的規則如下：
!important > 行內樣式 > ID 選擇器 > 類選擇器 > 標籤 > 通配符 > 繼承 > 瀏覽器默認屬性
當然，上述規則可以解決我們 80% 的疑惑。關鍵的是，還需要理解以下三點：
1. CSS 屬性繼承（詳情請看下文），我們來看一個例子：
首先定義 html 結構：
為其添加樣式規則：
如上代碼，那麼到底顯示什麼顏色呢？答案就是 yellow 。
你肯定會有這樣的疑惑：ID 選擇器的優先級高於 Class 選擇器，且還有繼承，應該是 red 。
其實不然，這裡不要被誤導了，其實 box 提供的 color 對 text 來說只能繼承 color 屬性，而
繼承優先級是小於直接作用元素的。請務必明確如下規則：- 繼承得到的樣式的優先級是最低的，在任何時候，只要元素本身有同屬性的樣式定義，就可以覆蓋掉繼承值；
- 在存在多個繼承樣式時，層級關係距離當前元素最近的父級元素的繼承樣式，具有相對最高的優先級；
2. CSS 權重計算：
CSS 權重計算其實就是統計選擇符中的不同組成元素的個數，並以 (a,b,c,d) 這種形式來判斷。
其中，abcd分別代表了不同類別的選擇符組成元素，且戰鬥力分別在不同的數量級，a最強，d最弱。
從強到弱，這4個字母分別代表的類別是：
- 內聯樣式（Inline style） a = 1 – (1,0,0,0)；
- Id選擇符 b = 1 – (0,1,0,0)
- 類選擇符 （Class），偽類選擇符（Pseudo class），屬性選擇符（Attribute） c = 1 – (0,0,1,0)
- 元素選擇符（Element），偽元素選擇符（Pseudo Element） d = 1 – (0,0,0,1)
- 這裡引用一張圖來說明：
3. !important 標識符；
毫無疑問，!important 會有最高的優先級，這也經常讓我們執行強制覆寫樣式。
但是需要注意，一定是直接作用元素，不要和繼承搞混淆，我們繼續用上面的演示代碼舉例：
html 結構不變：
樣式規則稍作修改，我們增加 !important 規則：
明白了上述規則後，我們不難得出結論，結果依然是黃色，因為 !important 再牛，在這裡他也是 color 繼承，顯然幹不過直接作用類 text。
深入閱讀請查看：CSS 優先級詳細解析
二、CSS 繼承性
CSS 繼承性是指被包在內部的標籤將擁有外部標籤的樣式性，即子元素可以繼承父元素的屬性。
有哪些屬性是可以繼承的呢，我們簡單分一下類：
1.font-family,font-size,font-weight 等 f 開頭的 CSS 樣式；
2.text-align,text-indent 等 t 開頭的樣式；
3.color；
三、CSS 層疊性
CSS 層疊性是指 CSS 樣式在針對同一元素配置同一屬性時，依據層疊規則（權重）來處理衝突，選擇應用權重高的 CSS 選擇器所指定的屬性，一般也被描述為權重高的覆蓋權重低的，因此也稱作層疊。
每個 CSS 選擇器都會有一個權重，當兩個選擇器同時配置同一元素的同一屬性時（比如一個設置 color：red，另一個 color：black ），就會產生衝突，而解決衝突的方案就是 CSS 選擇器的權重，權重高的來覆蓋權重低的。
層疊就是瀏覽器對多個樣式來源進行疊加，最終確定結果的過程。
這就回答了我們文章開頭提出的那個問題：CSS 之所以有“層疊”的概念，是因為有多個樣式來源。
四、示例解說
為了鞏固上面的知識，我們來高搞一些容易混淆的例子，簡單的測試一下。
示例一：
樣式規則，定義如下：
結果是 green ，因為 div 和 ol 都不是直接作用於 li 元素，所以他們拼的是繼承性，根據屬性繼承的就近原則，顯然 ol 更勝一籌。
示例二：
CSS 規則如下：
猜一猜，結果是什麼？
示例三：
為其設置如下規則：
CSS 規則都作用於文本，權重第一個大於第二個大於第三個（比較標籤選擇器數量），顯示 green。
示例四：
來自：https://blog.csdn.net/k491022087/article/details/52319252
為了演示效果，我們制定如下 CSS 規則：
我們暫且不去質疑這段代碼的正確性，先來分析一下最終的呈現效果：
- 首先，#father #son { color: red }; 設置了 #father 後代的 #son 字體顏色為 red；
- 其次，#father p.c2 { color: green }; 和 div.c1 p.c2 { color: yellow }; 想去作用，但 class 優先級低於 id ，所以 Jartto's blog 仍然為 red;
- 然後，又設置了 #father { color: pink !important}; ，企圖用 !important 去強制使 pink 生效，但是這對 Jartto's blog 來說只是 CSS 繼承，根據權重規則，繼承權重低於 id ，很顯然顏色依然是 red；
- 最後，div#father.c1 { color: blue }; 肯定權重更低了，所以依然無效，最終顏色只能是 red。
這是一個極端的例子，但是可以很好的理解這些例子大家可以去 Runjs 在線測試一下，這樣有助於更好的理解 CSS 的特性。
五、補充說明
好了，相信到這裡，大家對 CSS 的特性也有了深刻的認識。我們來解決一下之前拋出的疑問，再來看看這段拷貝過來的代碼：
CSS 規則如下：
本文的重點也說完了，這裡來挑一下刺，看看這段代碼的問題：
- #father #son { color: red }; 兩個 id 選擇器，簡直是浪費；
- id 選擇器中使用 !important 這就尷尬了；
- div#father 這種寫法把 id 選擇器變成了一個不精準的類選擇器了；
- 代碼可讀性很差，幾乎很難把握到重點，全是冗餘代碼；
可以看到，#son { color: red }; 這樣簡單一行代碼搞定的事情，被寫的亂七八糟，漏洞百出。
所以，我們不能只寫代碼，而不知其所以然，否則很有可能產生這樣的後果，十分尷尬。
六、你可能喜歡
1.
2.
3.
4.
5.
閱讀更多 F2EAwesome 的文章
