深刻理解 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

 

總結一下

上文其實很繞，看得人很暈。簡單總結一下：

1. 決定一個元素的樣式的最終表現，除了須要比較頁面做者定義的樣式的優先級以外，還須要比較樣式的層疊順序；

2. 層疊是 CSS 的一個基本特徵，定義瞭如何合併來自多個源的屬性值的算法，5 個決定 CSS 樣式的源分別是：用戶代理樣式、頁面做者樣式、用戶樣式、動畫、過渡；

3. 只有在層疊順序相等時，元素的最終樣式使用哪一個值才取決於樣式的優先級；

4. 最新規範中給出的層疊順序優先級與實際測得的有出入，不一樣內核瀏覽器實際表現不一致。

更多詳細的關於層疊和樣式優先級的概念，你能夠看看下面：

• Introducing the CSS Cascade
• Cascade and inheritance
• css-cascade-4

上述 MDN 的兩份文檔都是有中文版的，可是發現其中中文版有部分與英文版規範不一致，應該是後面英文版有更新，可是沒有同步到中文版，遇到這種狀況仍是應該去讀讀規範，而且本身實際動手實驗一下。

 

最後

上面的第四點是我本身實測所得，多是我搞錯了，或者是我理解錯了，若是是個人錯誤但願你們幫忙指出，共同進步學習。

更多精彩 CSS 技術文章彙總在個人 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。

好了，本文到此結束，但願對你有幫助 :)

若是還有什麼疑問或者建議，能夠多多交流，原創文章，文筆有限，才疏學淺，文中如有不正之處，萬望告知。

原文出處：https://www.cnblogs.com/coco1s/p/12200445.html