1. 首頁 > 生活百科 > >

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

小知識it知識


未被 @layer 包裹的樣式 > @layer C > @layer B > @layer A
匿名層與嵌套層還有兩種層級關系 ， 分別是匿名層和嵌套層 。
匿名層允許創建一個不帶名字的 @layer：
@layer { p { margin: 1rem; }}這里 ， 創建了一個匿名層 。 匿名層的兩個重要特性：

    創建后無法向其再添加規則
    該層和其他命名層功能一致 ， 優先級也遵循后定義的匿名層 ， 比其他已定義的 @layer 層 ， 優先級更高
看一個例子：
<div></div>div { width: 200px; height: 200px;}@layer { div { background: pink; }}@layer B, C, A;@layer A { div { background: blue; }}@layer B { div { background: green; }}@layer C { div { background: orange; }}上述代碼 ， 我們首先定義了一個匿名層 ， 指定了 div 的顏色為 pink ， 而后又定義了 @layer B, C, A 。 這里優先級順序為：
A > C > B > 匿名層
最終的顏色為 @layer A 內的顏色值 -- blue：
一文了解CSS3中的新特性@layer

文章插圖

如果 ， 我們將匿名層放在最后的話：
div { width: 200px; height: 200px;}@layer B, C, A;@layer A { div { background: blue; }}@layer B { div { background: green; }}@layer C { div { background: orange; }}@layer { div { background: pink; }}此時 ， 樣式的優先級順序為：
匿名層 > A > C > B
最終的顏色為匿名層內的顏色值 -- pink：
一文了解CSS3中的新特性@layer

文章插圖

嵌套層說完了匿名層 ， 我們再來看看嵌套層 。
顧名思義 ， 嵌套層的意思就是在 @layer 內部 ， 我們可以再嵌套使用 @layer 級聯層 。 像是這樣：
@layer A { @layer B{ ... }}當然 ， 它還有另外一種語法 ， 上述代碼等價于：
@layer A.B { ...}了解了這個后 ， 那么 ， 看這樣一個例子：
<div></div>div { width: 200px; height: 200px;}@layer A { div { background: blue; } @layer B { div { background: red; } }}我們在 @layer A 中嵌套一個 @layer B ， 同時都定義了一個 div 的樣式 ， 最終 div 的 background 到底是什么顏色呢？
最終為藍色 background: blue ， 為什么呢？這個很好記憶 ， 我們假設如果沒有 @layer A 這一層包裹 ， 其實就是上述說的 @layer 層與非 @layer 層的優先級比較 ， 這里 ， 非 @layer 層（我們可以理解為更高級別的一層 @layer）的優先級更高 。
因此 ， 對于單個 @layer 內的嵌套關系 ， 樣式優先級為：
@layer A > @layer A.B
多層嵌套層的優先級關系OK ， 再看這樣一種情況：
div { width: 200px; height: 200px;}@layer A { div { background: blue; } @layer B { div { background: red; } }}@layer C { div { background: yellow; } @layer D { div { background: green; } }}這里存在同時存在多個嵌套 @layer 的情況 。 那么這種情況優先級又是如何劃分呢？
這里的規則是 ， 優先級高的 @layer ， 無論是否存在嵌套 ， 優先級都整體比優先級低的 @layer（無論是否存在嵌套）高 ， 因此 ， 這里的優先級排序是：
@layer C > @layer C.D > @layer A > @layer A.B
!important 對 CSS @layer 的影響再來看看 !important 對 CSS @layer 的影響 。
這里可以分為幾種情況 ， 先看其中一種：
<div></div>div { width: 200px; height: 200px; background: black;}@layer A { div { background: blue; } @layer B { div { background: red; } }}@layer C { div { background: yellow; } @layer D { div { background: green!important; } }}上述代碼 ， 我們給 @layer C.D 的 <div> 添加了一個 !important 規則 。
如果 ， 不考慮 !important 規則 ， 那么實際的 CSS 優先級為（序號越高 ， 優先級越高）：
    @layer A.B
    @layer A
    @layer C.D
    @layer C
    非 layer 包裹塊
那么 ， <div> 的顏色應該為黑色 black 。 然而 ， 這里給 @layer C.D 的 <div> 添加了一個 !important 規則 。
實際上 ， 最終 <div> 的顏色為 green ， 也就是最終的優先級排序為（序號越高 ， 優先級越高）：

推薦閱讀