1. 首頁 > 生活百科 > >

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

小知識it知識

本篇文章帶大家一起深入了解一下CSS3中的新特性@layer ， 希望對大家有所幫助！

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

文章插圖

步入 2022 ， CSS 的新特性層出不窮 ， 而最近在 CSS 圈最受矚目的新特性 ， 非 CSS @layer 莫屬 。
本文 ， 將用最簡潔的語言 ， 快速讓讀者們搞懂 ， 到底什么是 CSS @layer 新規范 。
過往 CSS 優先級中存在的問題如果我們的頁面上存在非常多的樣式 ， 譬如有我們開發頁面的時候的自定義樣式 ， 也有引入的組件庫樣式 。 這時候樣式將會非?；靵y難以管理 。
當我們想覆蓋一些本身非我們書寫的樣式時候 ， 往往不得不通過使用優先級權重更高的樣式名 ， 去覆蓋那些樣式 。
同時 ， 當樣式優先級感到難以控制時 ， 開發者習慣濫用 !important 去解決 ， 這又循環導致了后續更混亂的樣式結構 。
基于讓 CSS 得到更好的控制和管理的背景 ， CSS @layer 應運而生 。
何為 CSS @layer？CSS @layer 從 CSS Cascading and Inheritance Level 5 被規范定義 。
何為 CSS @layer？簡單而言 ， CSS @規則 中的@layer聲明了一個 級聯層 ，  同一層內的規則將級聯在一起 ，  這給予了開發者對層疊機制的更多控制 。
語法也非常簡單 ， 看這樣一個例子：
@layer utilities { /* 創建一個名為 utilities 的級聯層 */}這樣 ， 我們就創建一個名為 utilities 的 @layer 級聯層 。
@layer 級聯層如何使用呢？
通過 @layer 級聯層管理樣式優先級@layer 級聯層最大的功能 ， 就是用于控制不同樣式之間的優先級 。
看下面這樣一個例子 ， 我們定義了兩個 @layer 級聯層 A 和 B：
<div></div>div { width: 200px; height: 200px;}@layer A { div { background: blue; }}@layer B { div { background: green; }}由于 @layer B 的順序排在 @layer A 之后 ， 所以 @layer B 內的所有樣式優先級都會比 @layer A 高 ， 最終 div 的顏色為 green：
一文了解CSS3中的新特性@layer

文章插圖

當然 ， 如果頁面內的 @layer 太多 ， 可能不太好記住所有 @layer 的順序 ， 因此 ， 還有這樣一種寫法 。
我們可以同時命名多個 @layer 層 ， 其后再補充其中的樣式規則 。
<div></div>@layer B, C, A;div { width: 200px; height: 200px;}@layer A { div { background: blue; }}@layer B { div { background: green; }}@layer C { div { background: orange; }}上述代碼 ， 我們首先定義了 @layer B, C, A 三個 @layer 級聯層 。 而后再后面的 CSS 代碼中補充了每個級聯層的 CSS 代碼 ， 但是樣式的優先級為：
A > C > B
因此 ， 最終的 div 的顏色值為 @layer A 中定義的顏色 ， 為 blue：
一文了解CSS3中的新特性@layer

文章插圖

到這里 ， CSS @layer 的作用可以清晰的被窺見 。
利用 CSS @layer ， 我們可以將 CSS 不同模塊劃入不同的 @layer 中 ， 利用先后順序 ， 非常好的去控制全局的樣式優先級 。
@layer 級聯層的三種定義引入方式上面其實提到了兩種 @layer 級聯層的定義引入方式 ， 這里再描述下 ， 一共有 3 種引入 CSS @layer 級聯層的方式 。
1、直接創建一個塊級的 @layer 規則 ， 其中包含作用于該層內部的CSS規則：
@layer utilities { p { padding: .5rem; }}2、一個級聯層可以通過 @import 來創建 ， 規則存在于被引入的樣式表內：
@import(utilities.css) layer(utilities);3、創建帶命名的級聯層 ， 但不指定任何樣式 。 樣式隨后可在 CSS 內任意位置添加：
@layer utilities;// ...// ...@layer utilities { p { color: red; }}非 @layer 包裹層與 @layer 層內樣式優先級當然 ， 這里還會有一種情況 ， 沒有被 @layer 包裹的樣式 ， 它的優先級和被 @layer 包裹的樣式相比 ， 又會如何呢？
看這樣一個例子：
@layer A { a { color: red; } }@layer B { a { color: orange; } }@layer C { a { color: yellow; } }a { color: green; } /* 未被 @layer 包裹的樣式 */這里會有一個非常重要的結論 ， 非 @layer 包裹的樣式 ， 擁有比 @layer 包裹樣式更高的優先級 ， 因此 ， 上述規則的排序是：

推薦閱讀