深入理解 CSS（Cascading Style Sheets）中的層疊（Cascading）
標題中的 Cascading 亦可以理解為級聯。
進入正文，這是一個很有意思的現象。可以直接跳到 總結一下 部分，看完再回過頭來閱讀本文。
引子
假設我們有如下結構：
<p class="txt" style="color:red">123456789</p>
上面的 p 標籤只有一個內聯 CSS，很明顯，在沒有其他樣式的干預下，文字 .txt 的顏色肯定就是紅色的。
如果此時，我們希望改變 .txt p 標籤元素的內容文字的顏色，但是不能去修改內聯 CSS，只能通過樣式檔案去實現，像是這樣：
.txt {
color: green;
}
嗯。稍微對 CSS 有點了解的同學都會知道，上面的 CSS 檔案設定的樣式不會生效，因為內聯樣式比上述 CSS 中的樣式優先順序要更高。
上述這種說法不是很嚴謹，下文會細說。
OK，有同學就會說了，這簡單，在 CSS 樣式檔案中新增 !important 字尾即可 。像是這樣：
.txt {
color: green!important;
}
如此操作之後，文字的顏色確實變成了綠色，因為在 CSS 檔案中帶 !important 字尾的規則優先順序大於內聯樣式中同個但不帶 !important
內聯樣式的 !important 與樣式表中的 !important
問題來了。
如果在內聯樣式中，我們也給加上 !important 會怎麼樣呢？
<p class="txt" style="color:red!important">123456789</p>
.txt {
color: green!important;
}
此時，內聯的 !important 優先順序更高，文字表現為紅色。
問題又來了，那如果此時我們無法修改內聯樣式，只能修改樣式表，有辦法能覆蓋內掉內聯的 !important
animtion 的威力（Chromium 核心）
哦吼，還真有一種看似是奇技淫巧，實則不是的方法。讓我們康康：
<p class="txt" style="color:red!important">123456789</p>
我們給 .txt p 元素新增一個動畫，改變它的顏色。
.txt {
animation: colorGreen 2s infinite;
}
@keyframes colorGreen {
0%,
100% {
color: green;
}
}
這裡新增了一個無限迴圈的動畫，且動畫初始狀態及結束狀態都賦予 color: green。甚至，我們都沒有在規則字尾新增 !important。
神奇的事情發生了，文字的顏色變成了綠色，成功的覆蓋了內聯的 <p class="txt" style="color:red!important"> 的紅色樣式。
CodePen Demo -- the priority of CSS Animation
常見 CSS 優先順序誤區
嚴格來說也不算是誤區（錯誤），但是這種說法不夠嚴謹。
通常我們聊到 CSS 規則的優先順序，第一時間都會想到這個表，也就是給不同的 CSS 規則賦予不同的權重：
一個選擇器的優先順序可以說是由四個部分相加 (分量)，可以認為是 個十百千 四位數的四個位數：
- 千位： 如果宣告在 style 的屬性（內聯樣式）則該位得一分。這樣的宣告沒有選擇器，所以它得分總是1000
- 百位： 選擇器中包含ID選擇器則該位得一分
- 十位： 選擇器中包含類選擇器、屬性選擇器或者偽類則該位得一分
- 個位：選擇器中包含元素、偽元素選擇器則該位得一分
總的來說是規則是：
內聯 > id 選擇器 > 類/屬性/偽類選擇器 > 標籤元素/偽元素
上面的規則沒有問題的。但是，注意，這裡僅僅考慮的是頁面作者定義的樣式的優先順序。首先，它並且沒有包含 !important 規則。
其次，對於決定一個 CSS 樣式的最終表現而言，還有非常重要的另外一個概念 -- 層疊。
Cascading -- 層疊
層疊是 CSS 的一個基本特徵，它是一個定義瞭如何合併來自多個源的屬性值的演算法。它在CSS處於核心地位，CSS的全稱層疊樣式表正是強調了這一點。
那麼什麼所謂的多個源又表示什麼呢？下面是影響層疊的五個源：
-
瀏覽器會有一個基本的樣式表來給任何網頁設定預設樣式。這些樣式統稱使用者代理樣式
-
網頁的作者可以定義文件的樣式，這是最常見的樣式表。大多數情況下此型別樣式表會定義多個，它們構成網站的視覺和體驗，即頁面主題，可以理解為頁面作者樣式
-
讀者，作為瀏覽器的使用者，可以使用自定義樣式表定製使用體驗，可以理解為使用者樣式
-
動畫（Animation），指使用 @Keyframes @規則定義狀態間的動畫，動畫序列中定義關鍵幀的樣式來控制CSS動畫序列
-
過渡 （Transition）
CSS動畫與層疊（重點）
CSS動畫，指使用@Keyframes @規則定義狀態間的動畫。
這裡有個重點：關鍵幀不參與層疊。
這意味著在任何時候 CSS 都是取單一的 @Keyframes 的值而不會是某幾個@Keyframe的混合。同時仍應注意用 @Keyframes（@規則）定義的值會覆蓋全部普通值，但會被 !important 的值覆蓋
這裡我其實沒弄很明白，這裡的意思就是動畫過程中的每一幀，決定元素的樣式表現只取決於單一的 @Keyframes 的值，但是規範和 MDN 文件中都明確表明，動畫 @Keyframes 中的值仍會被 !important 規則覆蓋，但是實際測試結果，在 Chromium 核心下，動畫 @Keyframes 中的值層疊順序高於 !important 規則。
CSS 選擇器的層疊（級聯）順序
上面說的常見的優先順序誤區，僅僅是規定了網頁的作者定義的樣式的優先順序。除此之外，CSS 優先順序還需要考慮選擇器的層疊（級聯）順序。
只有在層疊順序相等時，使用哪個值才取決於樣式的優先順序。
根據 CSS Cascading 4 最新標準：
CSS Cascading 4(Current Work)
定義的當前規範下申明的層疊順序優先順序如下（越往下的優先順序越高，下面的規則按升序排列）：
- Normal user agent declarations
- Normal user declarations
- Normal author declarations
- Animation declarations
- Important author declarations
- Important user declarations
- Important user agent declarations
- Transition declarations
簡單翻譯一下：
按照上述演算法，大概是這樣：
過渡動畫過程中每一幀的樣式 > 使用者代理、使用者、頁面作者設定的!important樣式 > 動畫過程中每一幀的樣式優先順序 > 頁面作者、使用者、使用者代理普通樣式
然而，經過多個瀏覽器的測試，實際上並不是這樣。（尷尬了）
實際測試的結果
實際程式碼測試的結果得出的結論其實是與規範中的優先順序不大一致的。
不同核心瀏覽器實際表現不大一致，
Chrome 78 / Safari 13.0.4 / Edge 44.18362 (與規範表現不一致，Chromium核心)
animation 動畫樣式 > 頁面作者定義的 !important 樣式 > transition 過渡動畫中的樣式 > 普通樣式
Firefox 71.0 (與規範表現一致)
頁面作者定義的 !important 樣式 > animation 動畫樣式 > transition 過渡動畫中的樣式 > 普通樣式
CodePen Demo -- the priority of CSS Animation
總結一下
上文其實很繞，看得人很暈。簡單總結一下：
-
決定一個元素的樣式的最終表現，除了需要比較頁面作者定義的樣式的優先順序之外，還需要比較樣式的層疊順序；
-
層疊是 CSS 的一個基本特徵，定義瞭如何合併來自多個源的屬性值的演算法，5 個決定 CSS 樣式的源分別是：使用者代理樣式、頁面作者樣式、使用者樣式、動畫、過渡；
-
只有在層疊順序相等時，元素的最終樣式使用哪個值才取決於樣式的優先順序；
-
最新規範中給出的層疊順序優先順序與實際測得的有出入，不同核心瀏覽器實際表現不一致。
更多詳細的關於層疊和樣式優先順序的概念，你可以看看下面：
- Introducing the CSS Cascade
- Cascade and inheritance
- css-cascade-4
上述 MDN 的兩份文件都是有中文版的，但是發現其中中文版有部分與英文版規範不一致，應該是後面英文版有更新，但是沒有同步到中文版，遇到這種情況還是應該去讀讀規範，並且自己實際動手實驗一下。
最後
上面的第四點是我自己實測所得，可能是我搞錯了，或者是我理解錯了，如果是我的錯誤希望大家幫忙指出，共同進步學習。
更多精彩 CSS 技術文章彙總在我的 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。
好了，本文到此結束，希望對你有幫助 :)
如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告