1. 首頁 > 生活百科 > >

一文了解CSS3中的新特性@layer( 三 )

小知識it知識


    @layer A.B
    @layer A
    @layer C
    非 layer 包裹塊
    !important 下的 @layer C.D
也就是說 ， 這里 !important 規則的優先級還是凌駕于非 !important 規則之上的 。
上述 DEMO 還是比較有意思的 ， 感興趣的可以看看：CodePen Demo -- CSS Cascade @layer Demo
https://codepen.io/Chokcoco/pen/KKZKBRr
非 @layer 包含塊 !important 與 @layer 包含塊 !important到這里 ， 你也許會以為你懂了 。 好 ， 我們再來看一個 DEMO ， 如果我們給非 @layer 包含塊 ， 也加上一個 !important 規則 ， 事情就變得有趣了 。
<div></div>div { width: 200px; height: 200px; background: black!important;}@layer A { div { background: blue; } @layer B { div { background: red; } }}@layer C { div { background: yellow; } @layer D { div { background: green!important; } }}仔細看上述代碼 ， 非 @layer 包含塊 ， 我們也加上了一個 !important 規則 ， 按照上述我能描述的規則來看 ， 非 @layer 包含塊的優先級高于 @layer 包含塊 ， 那么正常而言 ， 我們不難猜測 ， 這里 background: black!important 的優先級應該要比 background: green!important 高 ， 最終 <div> 應該展示黑色 。
而實際上 ， 這里最終 <div> 的顏色還是 green 。 這里就又有一個非常有意思的知識點了 ， !important 下樣式優先級的規則與非 !important 正常狀態下剛好相反 。
這是一個非常重要的特性 ， 在比較正常（非 !important）規則時 ， 越是級聯（排序較后的 @layer 規則） ， 優先級越低；反之 ， 在比較 !important 規則時 ， 越是級聯靠后的（排序較后的 @layer 規則） ， 優先級越高 。
這個 ， 更進一步的話 ， 我們需要去了解 CSS Cascading 相關的知識了 。
CSS Cascade 規范在 CSS @layer 之前 ， 我們簡單看一張圖：
一文了解CSS3中的新特性@layer

文章插圖

上圖表面的是在沒有 CSS @layer 之前 ， CSS 樣式申明的優先級排序 ， 根據 CSS Cascading 4(Current Work) 標準 ， 定義的當前規范下申明的層疊順序優先級如下（越往下的優先級越高 ， 下面的規則按升序排列）：
    Normal user agent declarationsNormal user declarationsNormal author declarationsAnimation declarationsImportant author declarationsImportant user declarationsImportant user agent declarationsTransition declarations
按照上述算法 ， 可以得到一個樣式優先級的排序 ， 大概是這樣（越往下的優先級越高 ， 下面的規則按升序排列）：
一文了解CSS3中的新特性@layer

文章插圖

    User Agent - 用戶代理普通樣式
    User - 用戶設置的普通樣式
    Author - 頁面作者普通樣式
    Animations - 動畫樣式
    ❗️Author - 頁面作者 !important 樣式
    ❗️User - 用戶設置的 !important 樣式
    ❗️User Agent - 用戶代理的 !important 樣式
    Transitions - 過渡樣式
簡單解釋一下：用戶代理樣式：瀏覽器會有一個基本的樣式表來給任何網頁設置默認樣式 。 這些樣式統稱用戶代理樣式頁面作者樣式：網頁的作者可以定義文檔的樣式 ， 這是最常見的樣式表 。 大多數情況下此類型樣式表會定義多個 ， 它們構成網站的視覺和體驗 ， 即頁面主題 ， 可以理解為頁面作者樣式用戶樣式：讀者 ， 作為瀏覽器的用戶 ， 可以使用自定義樣式表定制使用體驗 ， 自定義用戶偏好 ， 可以理解為用戶樣式
關于 CSS Cascading ， 也就是層疊規范 ， 你可以看看我的這篇文章加深理解 -- 深入理解 CSS（Cascading Style Sheets）中的層疊（Cascading） 。
https://github.com/chokcoco/iCSS/issues/76
而當有了 CSS @layer 之后 ， 這個層疊優先級順序有了更新 ， 具體優先級如下：
一文了解CSS3中的新特性@layer

文章插圖

整體會變更為復雜一些 ， 但是總體還是遵循了兩個規則：

推薦閱讀