深入理解 CSS(Cascading Style Sheets)中的層疊(Cascading)

来源:https://www.cnblogs.com/coco1s/archive/2020/01/16/12200445.html
-Advertisement-
Play Games

標題中的 Cascading 亦可以理解為級聯。 進入正文,這是一個很有意思的現象。可以直接跳到 總結一下 部分,看完再回過頭來閱讀本文。 引子 假設我們有如下結構: 上面的 p 標簽只有一個內聯 CSS,很明顯,在沒有其他樣式的干預下,文本 .txt 的顏色肯定就是紅色的。 如果此時,我們希望改變 ...


標題中的 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. 最新規範中給出的層疊順序優先順序與實際測得的有出入,不同內核瀏覽器實際表現不一致。

更多詳細的關於層疊和樣式優先順序的概念,你可以看看下麵:

上述 MDN 的兩份文檔都是有中文版的,但是發現其中中文版有部分與英文版規範不一致,應該是後面英文版有更新,但是沒有同步到中文版,遇到這種情況還是應該去讀讀規範,並且自己實際動手實驗一下。

 

最後

上面的第四點是我自己實測所得,可能是我搞錯了,或者是我理解錯了,如果是我的錯誤希望大家幫忙指出,共同進步學習。

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

好了,本文到此結束,希望對你有幫助 :)

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


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 寫此文的緣由:現如今,網路上,沒有同下的解釋形式(或者在外網,所以我沒找到,或者大佬覺得太簡單所以不屑解釋)。然而,我認為這是對VUE+ElementUI的底層框架的理解深入化問題。(為什麼要深入理解底層,來自學習java時留下的習慣,挖底層代碼是常態) 在API文檔中: <el-button @c ...
  • 一個小案例,鞏固有狀態組件和無狀態組件的使用 通過for迴圈生成多個組件 1. 數據: 入口 評論列表組件 使用CSS模塊化 1. 可以在webpack.config.js中為css loader啟用模塊化: 2. 使用 定義全局樣式 webpack中的配置 style樣式 評論項的組件 ...
  • react中的組件組件 react組件介紹 在React中,構造函數,就是一個最基本的組件 如果想要把組件放到頁面中,可以把 構造函數的名稱,當作 組件的名稱,以 HTML標簽形式引入頁面中即可 註意:React在解析所有的標簽的時候,是以標簽的首字母來區分的,如果標簽的首字母是小寫,那麼就按照 普 ...
  • JSX語法 1. 如要要使用 JSX 語法,必須先運行 ,然後再 中添加 語法配置; babelrc配置 webpack中配置 2. JSX語法的本質:還是以 React.createElement 的形式來實現的,並沒有直接把 用戶寫的 HTML代碼,渲染到頁面上; 3. 如果要在 JSX 語法內 ...
  • 實現mini版react redux 1. 理解react redux模塊 1). react redux模塊整體是一個對象模塊 2). 包含2個重要屬性: Provider和connect 3). Provider 值: 組件類 作用: 向所有容器子組件提供全局store對象 使用: 4). co ...
  • 實現mini版redux 1. 理解redux模塊 1). redux模塊整體是一個對象模塊 2). 內部包含幾個函數 createStore(reducers) // reducers: function(state, action){ return newState} combineReduce ...
  • React中幾個核心的概念 虛擬DOM(Virtual Document Object Model) + DOM的本質是什麼:就是用JS表示的UI元素 + DOM和虛擬DOM的區別: DOM是由瀏覽器中的JS提供功能,所以我們只能人為的使用 瀏覽器提供的固定的API來操作DOM對象; 虛擬DOM:並 ...
  • JS 百度地圖-右鍵菜單 /* 標註右鍵刪除 */ var markerMenu = new BMap.ContextMenu(); markerMenu.addItem(new BMap.MenuItem('刪除標註 ', function () { map.removeOverlay(marke ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...