如何使用 CSS 級(jí)聯(lián)層

用 CSS 最困難的部分之一是處理特異性。如果您嘗試從像 Bootstrap 這樣的框架覆蓋樣式，這一點(diǎn)尤其明顯，但是隨著 CSS 層的引入，這一切都發(fā)生了變化。這個(gè)新功能允許您創(chuàng)建自己的自定義 CSS 層，這是有史以來(lái)第一次確定所有 CSS 代碼的特異性層次結(jié)構(gòu)。在本文中，我將剖析這對(duì)您意味著什么，它是如何工作的，以及您今天如何開始使用它。

什么是圖層？

創(chuàng)建自己的自定義圖層的能力對(duì)于 CSS 來(lái)說(shuō)是新功能，但圖層從一開始就在 CSS 中存在。CSS 中有 3 個(gè)不同的層來(lái)管理所有樣式的工作方式。

瀏覽器（也稱為用戶代理）樣式
用戶風(fēng)格
作者風(fēng)格

瀏覽器樣式是應(yīng)用于瀏覽器的默認(rèn)樣式。這就是為什么 Chrome 和 Safari 中的按鈕看起來(lái)不同的原因。在瀏覽器層中找到的樣式在瀏覽器之間是不同的，并且給每個(gè)瀏覽器一個(gè)獨(dú)特的外觀。

下一層是用戶樣式，這并不是您真正需要擔(dān)心的事情。這些通常是用戶可以編寫并注入瀏覽器的自定義樣式，但瀏覽器不再真正支持這些樣式。用戶可能會(huì)更改一些瀏覽器設(shè)置，這些設(shè)置會(huì)向該圖層添加樣式，但在大多數(shù)情況下，可以完全忽略該圖層。

最后，我們來(lái)到作者層。這是您最熟悉的層，因?yàn)槟帉懙拿恳欢?CSS 代碼都屬于這一層

層疊的規(guī)則

層疊的規(guī)則是按照“樣式表來(lái)源”、“選擇器優(yōu)先級(jí)”、“源碼順序”來(lái)考慮的，下圖展示了一個(gè)判定流程：

但是頁(yè)面一樣復(fù)雜，組件一多，樣式管理起來(lái)還是很費(fèi)勁，很多時(shí)候還是得用自己不想用的一些「優(yōu)先級(jí)」權(quán)重高的選擇器去覆寫樣式，比如ID或者 !important，所以CSS新出一個(gè) @layer 特性，能讓樣式得到更好的管理和控制。

如何創(chuàng)建自己的圖層

大家用過(guò)ps的話，很好理解 @layer ，它就像ps里的圖層一樣，可以對(duì)ps圖層進(jìn)行排序，上面的圖層有更高的優(yōu)先級(jí)，@layer 的一個(gè)重要作用，就是可以提前定義好“級(jí)聯(lián)層”的優(yōu)先級(jí)：

@layer one {
  #button.super-specific-selector {
    color: red;
  }
}
@layer two {
  button {
    color: green;
  }
}

正如你在上面看到的，我們只是使用@layer關(guān)鍵字來(lái)創(chuàng)建一個(gè)自定義層，給它任何我們想要的名稱。圖層two的樣式會(huì)覆蓋圖層one的樣式。one無(wú)論其特殊性如何。

瀏覽器樣式
用戶風(fēng)格
作者風(fēng)格

如您所見，我們?cè)谧髡邩邮街袆?chuàng)建了兩個(gè)新層，我們可以使用它們來(lái)組織我們的代碼并使使用特定性更容易。

附加到圖層

如何將代碼添加到現(xiàn)有層。

@layer one {
  #button.super-specific-selector {
    color: red;
  }
}
@layer two {
  button {
    color: green;
  }
}
@layer one {
  .another-style {
    color: blue;
  }
}

在這個(gè)例子中你可以看到我已經(jīng)定義one了兩次圖層。這完全沒(méi)問(wèn)題，實(shí)際上是在創(chuàng)建圖層后向圖層添加更多樣式的方式。這樣做不會(huì)影響層的順序，因?yàn)閷拥捻樞蚴怯蓜?chuàng)建層的第一段代碼決定的。這意味著我們one在 CSS 文件頂部的第一個(gè)圖層實(shí)例將創(chuàng)建圖層，因此本示例中的圖層順序與上一個(gè)示例中的相同。唯一的區(qū)別是我們能夠在圖層one創(chuàng)建后通過(guò)@layer再次使用關(guān)鍵字來(lái)添加額外的樣式。等同如下

@layer one {
  #button.super-specific-selector {
    color: red;
  }
  .another-style {
    color: blue;
  }
}
@layer two {
  button {
    color: green;
  }
}

定義層順序

這種在創(chuàng)建圖層后向圖層添加樣式的功能在定義圖層順序時(shí)非常有用。想象一下，您有以下幾層

@layer base,application;
@layer application {
    em {
        color: red;
    }
}
@layer base {
    .item em {
        color: green;
    }
}

通過(guò)@layer base,application;按從左到右的順序定義所有層，其中列出的base是最不具體的，最后指定的層application是最具體的。也是最先生效的。然后，您可以稍后使用正常@layer語(yǔ)法將代碼添加到每個(gè)層，而不必?fù)?dān)心定義層的順序，因?yàn)樗鼈兌荚谶@一行中定義。需要注意的是，這行代碼必須在定義任何層之前出現(xiàn)，所以我通常將它作為我的 CSS 文件中的第一行。

導(dǎo)入圖層

很多時(shí)候，當(dāng)你使用一個(gè)框架時(shí)，你可能會(huì)像這樣將它導(dǎo)入到你的 CSS 中。

@import url("your.css");

如果要將所有這些導(dǎo)入的代碼添加到特定層，只需添加layer(layer-name)到導(dǎo)入語(yǔ)句的末尾即可。

@import url("your.css") layer(layerName);

這會(huì)將所有樣式添加your.css到layerName圖層。但是，使用導(dǎo)入的一件事是它們的性能不是很好，因?yàn)槭紫饶枰螺d包含該@import語(yǔ)句的樣式表，然后瀏覽器才能下載導(dǎo)入的文件。解決此問(wèn)題的一種方法是在 HTML 中使用style標(biāo)簽。

<!-- link tag to stylesheet that define your layers -->
<link rel="stylesheet" href="styles.css">
<style>
  @import url("your.css") layer(layerName);
</style>

通過(guò)像這樣編寫代碼，您可以避免所有性能問(wèn)題，@import但仍然可以獲得直接導(dǎo)入圖層的所有好處

匿名層

匿名層指的是不聲明layer名地級(jí)聯(lián)層，它在級(jí)聯(lián)層中的優(yōu)先級(jí)，取決于layer聲明次序：

@layer A {
    body {
        background-color: green;
    }
}
@layer {
    body {
        background-color: red;
    }
}
@layer B {
    body {
        background-color: bisque;
    }
}

優(yōu)先級(jí)從高到低為：B > 匿名 > A，所以最后生效的body背景色為bisque。這并不是我覺(jué)得太有用的東西，但如果你真的需要將少量的 CSS 代碼分成一個(gè)層，這可能會(huì)很有用。

嵌套層

我認(rèn)為不太有用的另一個(gè)功能是能夠?qū)D層相互嵌套

@layer outer {
  @layer inner {
    .button {
      color: red;
    }
  }
}
@layer outer.inner {
  .another {
    color: green;
  }
}

通過(guò)使用上面的.語(yǔ)法或嵌套語(yǔ)法，您可以在其他層內(nèi)創(chuàng)建層。這是您可能不會(huì)經(jīng)常使用的東西，因?yàn)榇蠖鄶?shù)應(yīng)用程序只有幾層，但如果您有一個(gè)非常復(fù)雜或大型樣式系統(tǒng)，這可能會(huì)很有用。

重要的層概念

這涵蓋了創(chuàng)建圖層的基礎(chǔ)知識(shí)，但是您需要了解一些關(guān)于圖層的概念才能充分利用圖層。

非分層樣式更先生效

到目前為止，我們只處理了所有樣式都在圖層中的 CSS。當(dāng)您的樣式?jīng)]有圖層時(shí)，事情會(huì)變得有點(diǎn)復(fù)雜。

body {
    background-color: blue;
}
@layer A {
    body {
        background-color: red;
        color: black;
    }
}
@layer B {
    body {
        color: blue;
        background-color: green;
    }
}

在這個(gè)例子中，我們有兩個(gè)個(gè)A和B圖層，然后是一個(gè)沒(méi)有圖層的樣式。當(dāng)您的代碼不在任何層中時(shí)，它總是被認(rèn)為比分層代碼更具體。這意味著我們的有一個(gè)藍(lán)色的背景。為了使這一點(diǎn)更容易理解，我喜歡將不在任何層中的代碼視為在所有其他層之后定義的自己的層中。

瀏覽器樣式
用戶風(fēng)格
作者風(fēng)格

A layer
B layer
非分層樣式

這有助于我可視化我的代碼，因此我可以理解為什么非分層代碼總是覆蓋層內(nèi)的代碼。

！improtant

該!important關(guān)鍵字使使用特異性變得困難，并且對(duì)于圖層來(lái)說(shuō)也沒(méi)有什么不同。該!important關(guān)鍵字的工作方式與普通圖層完全相反。如果您使用!important關(guān)鍵字定義樣式，它將覆蓋該層之后定義的層中的任何樣式。

@layer one {
  button {
    color: red !important;
  }
}
@layer two {
  button {
    color: green;
  }
}

在上面的例子中，按鈕文本將是紅色的，因?yàn)槲覀冎?/span>!important定義了顏色。但是，如果我們嘗試添加!important到 layertwo以覆蓋!important來(lái)自圖層one，它實(shí)際上不會(huì)更改按鈕顏色。

@layer one {
  button {
    color: red !important;
  }
}
@layer two {
  button {
    color: green !important;
  }
}

這樣做的原因是因?yàn)樗?/span>!important的工作方式與普通圖層相反。由于 layerone是在 layer 之前定義的，所以 layer中的two所有!important樣式one都會(huì)覆蓋 layer 中的任何樣式，包括!important樣式two。這意味著我們的按鈕仍然是紅色的。

如果我再加一個(gè)沒(méi)有圖層!important的普通樣式，按鈕又是什么顏色的呢？

@layer one {
  button {
    color: red !important;
  }
}
@layer two {
  button {
    color: green !important;
  }
}
button{
    color: blue !important;
}

根據(jù)非分層樣式更先生效，那自然按鈕會(huì)是藍(lán)色的。

瀏覽器支持

對(duì)于每一個(gè)很酷的 CSS 功能，你總是需要考慮瀏覽器的支持，但幸運(yùn)的是，對(duì)我們來(lái)說(shuō)，圖層得到了很好的支持，并且很快就會(huì)得到完美的支持。目前，layer有84.31% 的支持率，但這主要是因?yàn)檫@個(gè)功能最近才在最新版本的瀏覽器中推出。大多數(shù)現(xiàn)代瀏覽器在撰寫本文時(shí)不到一個(gè)月前就推出了此功能，這意味著我們目前只是在等待用戶將他們的瀏覽器更新到最新版本以支持此功能。

結(jié)論

總之，@layer 還是蠻好用的，希望能盡快在業(yè)務(wù)代碼里面用到吧。

介：本文介紹使用Python，爬取國(guó)家統(tǒng)計(jì)局網(wǎng)站區(qū)劃和城鄉(xiāng)劃分代碼數(shù)據(jù)，并保存為不同的格式。該功能可為電商等行業(yè)規(guī)范客戶郵寄地址的填寫提供幫助。

數(shù)據(jù)源和格式

行政區(qū)劃數(shù)據(jù)取自國(guó)家統(tǒng)計(jì)局網(wǎng)站（http://www.stats.gov.cn/tjsj/tjbz/tjyqhdmhcxhfdm/），數(shù)據(jù)按行政級(jí)別由大到下通過(guò)鏈接和純html文本嵌套呈現(xiàn)。如河北省：

第一級(jí) 河北省區(qū)劃代碼13，網(wǎng)頁(yè)地址 http://www.stats.gov.cn/tjsj/tjbz/tjyqhdmhcxhfdm/2021/13.html
第二級(jí) 石家莊市區(qū)劃代碼1301，網(wǎng)頁(yè)地址 http://www.stats.gov.cn/tjsj/tjbz/tjyqhdmhcxhfdm/2021/13/1301.html
第三級(jí) 長(zhǎng)安區(qū) 區(qū)劃代碼130102，網(wǎng)頁(yè)地址 http://www.stats.gov.cn/tjsj/tjbz/tjyqhdmhcxhfdm/2021/13/01/130102.html
第四級(jí) 建北街道區(qū)劃代碼130102001，網(wǎng)頁(yè)地址 http://www.stats.gov.cn/tjsj/tjbz/tjyqhdmhcxhfdm/2021/13/01/02/130102001.html
第五級(jí) 棉一東社區(qū)居民委員會(huì) 區(qū)劃代碼130102001001

獲取頂級(jí)區(qū)域（省/直轄市/自治區(qū)，不含港澳臺(tái)）的地址是 http://www.stats.gov.cn/tjsj/tjbz/tjyqhdmhcxhfdm/2021/index.html。其中的“2021”代表數(shù)據(jù)時(shí)間版本。

區(qū)劃代碼格式定義參見“民政部行政區(qū)劃規(guī)則（https://www.mca.gov.cn/article/sj/xzqh/1980/）”。

爬取目標(biāo)

通過(guò)Python分析網(wǎng)頁(yè)，從頂級(jí)區(qū)域自動(dòng)識(shí)別各級(jí)子區(qū)域代碼和名稱，并保存為不同的數(shù)據(jù)格式，以供其他業(yè)務(wù)進(jìn)一步使用。本Python程序可將爬取后的數(shù)據(jù)另存為

html表格文件
Excel格式文件
sql格式文件
json格式文件

數(shù)據(jù)格式文件

以河北省為例：文件名中的13是河北省區(qū)劃代碼；文件中ID是自定義的數(shù)據(jù)主鍵，2021是數(shù)據(jù)版本號(hào)。

html表格文件，文件名 address_model_13.html

Excel格式文件：文件名 address_model_13.xlsx

sql格式文件：文件名 address_model_13.sql

json格式文件：文件名 address_model_13.json。json格式文件是按行政區(qū)域的級(jí)聯(lián)形式，不帶ID和版本號(hào)字段。

使用說(shuō)明

Python需要本版3.5以上，且要安裝requests，pandas，BeautifulSoup庫(kù)

程序可在命令行直接運(yùn)行：

python AddressUtil.py

參數(shù)在程序中設(shè)置，分別是

province：頂級(jí)區(qū)域代碼，province = 0時(shí)獲取頂級(jí)區(qū)域數(shù)據(jù)，可用于測(cè)試，減少獲取數(shù)據(jù)等待的時(shí)間
out_format：輸出格式

參數(shù)取值見源程序

程序運(yùn)行時(shí)會(huì)打印獲取的區(qū)域進(jìn)度和異常

出現(xiàn)“request timeout”時(shí)說(shuō)明由于網(wǎng)絡(luò)問(wèn)題未獲取網(wǎng)頁(yè)需要重試。本程序設(shè)置了三次重試，如三次重試仍未獲取，則程序退出，請(qǐng)檢查你的網(wǎng)絡(luò)連接和統(tǒng)計(jì)局網(wǎng)站是否有問(wèn)題。

結(jié)束語(yǔ)

區(qū)劃代碼數(shù)據(jù)的使用，引用統(tǒng)計(jì)局網(wǎng)站原文——“統(tǒng)計(jì)用區(qū)劃代碼和城鄉(xiāng)劃分代碼用于統(tǒng)計(jì)工作，需要在其他工作中使用時(shí)，請(qǐng)務(wù)必結(jié)合有關(guān)實(shí)際情況。”

本文涉及的Python程序和數(shù)據(jù)樣例可從百度網(wǎng)盤下載

https://pan.baidu.com/s/1Jhd_4NPn12WtteOW3IP3AA?pwd=1234 提取碼: 1234

特別聲明：本人保留源程序版權(quán)，源程序可供任何人自由使用（包括商業(yè)行為），本人不對(duì)使用本程序的后果承擔(dān)任何責(zé)任。使用時(shí)請(qǐng)標(biāo)注或保留原作者名：雙魚菜青蟲(賬號(hào))。

近在Weekly郵件推送中查閱到這樣的一條信息：

Chromium 團(tuán)隊(duì)宣布他們將隨 Chromium 99（預(yù)計(jì)在明年 3 月發(fā)布）一起發(fā)布CSS Cascade Layers

會(huì)發(fā)現(xiàn)這條信息里面出現(xiàn)了一個(gè)CSS的新名詞CSS Cascade Layers，出于好奇以及對(duì)新知識(shí)的渴望（說(shuō)得我自己都信了，哈哈），于是查閱起CSS Cascade Layers的相關(guān)資料，試圖搞懂它。

前置知識(shí)

at-rule規(guī)則

at-rule規(guī)則， CSS Conditional Rules Module Level 3新增的規(guī)則，是一條語(yǔ)句，它為CSS提供了執(zhí)行或如何執(zhí)行的指令，常見的at-rule規(guī)則有：

@import，允許用戶從其他樣式表導(dǎo)入樣式規(guī)則
@font-face，允許我們引用自定義的字體
@keyframes，聲明一個(gè)動(dòng)畫
@media，是條件CSS中的一種，其條件是一個(gè)媒體查詢
@supports，測(cè)試用戶代理是否支持CSS屬性/值對(duì)
@viewport，用來(lái)控制移動(dòng)設(shè)備上的viewport設(shè)置

Cascading and Inheritance Level

級(jí)聯(lián)(層疊)與繼承經(jīng)過(guò)多年的發(fā)展迭代，目前已有多個(gè)版本（CSS2.2、Level3、Level4 和 Level5）

何為級(jí)聯(lián)（層疊）？

層疊本質(zhì)就是定義了如何合并來(lái)自多個(gè)源的屬性值的算法，簡(jiǎn)單來(lái)說(shuō)，CSS規(guī)則的順序很重要。當(dāng)兩條同級(jí)別的規(guī)則應(yīng)用到一個(gè)元素的時(shí)候，寫在后面的就是實(shí)際使用的規(guī)則。

h1 { 
    color: red; 
}
h1 { 
    color: blue; 
}

兩條規(guī)則優(yōu)先級(jí)相同，所以順序在最后的生效，h1是color:blue'勝出'，顯示藍(lán)色。

只有CSS聲明，就是屬性名值對(duì)，會(huì)參與層疊計(jì)算。這表示包含CSS聲明以外實(shí)體的@規(guī)則不參與層疊計(jì)算，如包含描述符的@font-face，@規(guī)則（at-rule規(guī)則）是做為一個(gè)整體參與層疊計(jì)算。

css屬性一般來(lái)自于哪幾個(gè)源？

1、用戶代理樣式表：瀏覽器的基本的樣式表，用于給所有網(wǎng)頁(yè)設(shè)置默認(rèn)樣式。
2、用戶樣式表：網(wǎng)頁(yè)的作者可以定義文檔的樣式。大多數(shù)情況下此類型樣式表會(huì)定義網(wǎng)站的主題。
3、瀏覽器的用戶使用自定義樣式表定制使用體驗(yàn)。

層疊（級(jí)聯(lián)）算法如何過(guò)濾來(lái)自不同源的css規(guī)則？

相互沖突的聲明按以下順序適用，后一種聲明將覆蓋前一種聲明：

1、用戶代理樣式表中的聲明(瀏覽器的默認(rèn)樣式)。
2、用戶樣式表中的常規(guī)聲明(用戶設(shè)置的自定義樣式，就如同我們的reset.css)。
3、作者樣式表中的常規(guī)聲明(開發(fā)人員設(shè)置的樣式)。
4、作者樣式表中的!important聲明
5、用戶樣式表中的!important 聲明

過(guò)濾來(lái)自不同源的css規(guī)則后，確定同源優(yōu)先級(jí)高低，決定誰(shuí)“優(yōu)勝”

  !important > 內(nèi)聯(lián)style > #id > .class > 標(biāo)簽

了解級(jí)聯(lián)算法有助于幫助我們理解瀏覽器是如何解決樣式規(guī)則沖突，也就是瀏覽器決定哪個(gè)樣式規(guī)則運(yùn)用到元素上，更多相關(guān)css級(jí)聯(lián)的了解：

何為繼承？

當(dāng)元素的一個(gè)繼承屬性沒(méi)有指定值時(shí)，則取父元素的同屬性的計(jì)算值。只有文檔根元素取該屬性定義的默認(rèn)值，類似的屬性有color、font-size等。

CSS是由Cascading Style Sheets三個(gè)詞的首字母縮寫，很多人將其稱為層疊樣式表或者級(jí)聯(lián)樣式表.

@layer

CSS Cascade Layers，也叫做CSS級(jí)聯(lián)層，是Cascading and Inheritance Level5 規(guī)范中新增了一個(gè)新的 CSS 特性，對(duì)應(yīng)的CSS屬性寫法@layer,即一個(gè)新的 @ 規(guī)則，也就是大家所說(shuō)的at-rule 規(guī)則。

為啥會(huì)出現(xiàn)@layer？

通過(guò)上面我們對(duì)級(jí)聯(lián)介紹，我們已經(jīng)看到了順序?qū)τ趯盈B的重要性，同權(quán)重的css屬性后者會(huì)“優(yōu)勝”前者，權(quán)重不同會(huì)根據(jù)CSS聲明來(lái)源和優(yōu)先級(jí)算法來(lái)判斷誰(shuí)“優(yōu)勝”。!important的CSS規(guī)則自動(dòng)將它跳到層疊算法的前面，能夠覆蓋普通規(guī)則的層疊。

也就是說(shuō)我們一般會(huì)使用選擇器權(quán)重和順序作為控制級(jí)聯(lián)的方法，但是這樣卻會(huì)時(shí)常碰到：

使用較高權(quán)重的選擇器來(lái)防止你的代碼被后面的代碼（或別人的代碼）覆蓋。但這也會(huì)引起另一個(gè)不良的現(xiàn)象，可能會(huì)在代碼中新增很多帶有 !important 的樣式規(guī)則，這本身就會(huì)引起更多的問(wèn)題，比如 !important 在 CSS 樣式表中隨處可見，需要覆蓋的時(shí)候難以被覆蓋。

使用較低權(quán)重的選擇器又很容易被后面的代碼（或別人的代碼）覆蓋。比如你在引入第三方代碼庫(kù)或組件時(shí)，自己的代碼可能被覆蓋。

這兩個(gè)現(xiàn)象也是編寫CSS代碼，特別是在一個(gè)大型項(xiàng)目或多人協(xié)作的項(xiàng)目中常出現(xiàn)。也給很多CSS開發(fā)者帶來(lái)很多困擾。

雖然社區(qū)有很多第三方方案，如CSS-in-JS、CSS Modules 和 CSS Scoped等來(lái)協(xié)助解決級(jí)聯(lián)所帶來(lái)的問(wèn)題，但由于源碼順序（打包產(chǎn)物）仍然起著決定性的作用，順序帶來(lái)的覆蓋和沖突依舊未真正的解決，而且選擇器權(quán)重仍然比層的順序（源碼順序）更重要。

這樣的背景促進(jìn)了@layer的出現(xiàn)，要真正的解決級(jí)聯(lián)帶來(lái)的這些問(wèn)題。

@layer的出現(xiàn)，也要求我們對(duì)以往css級(jí)聯(lián)有個(gè)新的了解,

可以看出CSS的級(jí)聯(lián)層一般位于“Style 屬性”（Style Attribute）和 CSS 選擇器權(quán)重（Specificity）之間。

使用CSS級(jí)聯(lián)層，可以通過(guò)@layer at-rule將 CSS 分成多個(gè)層。

與 CSS屬性來(lái)源在用戶樣式表和作者樣式表風(fēng)格之間提供權(quán)衡的方式相同，Cascade Layers 提供了一種結(jié)構(gòu)化的方式來(lái)組織和權(quán)衡單個(gè) 來(lái)源內(nèi)的關(guān)注點(diǎn)

如何使用

創(chuàng)建級(jí)聯(lián)層

級(jí)聯(lián)層可以通過(guò)多種方式聲明：

1、使用@layer 塊規(guī)則，并立即為其分配樣式：

@layer reset {
  * { /* Poor Man's Reset */
    margin: 0;
    padding: 0;
  }
}

2、使用規(guī)則@layer 語(yǔ)句，沒(méi)有指定任何樣式：

@layer reset;

3、將@import 與layer關(guān)鍵字或layer()函數(shù)一起使用

@import(reset.css) layer(reset);

以上每一個(gè)都創(chuàng)建了一個(gè)名為的級(jí)聯(lián)層reset。

管理級(jí)聯(lián)層

級(jí)聯(lián)層會(huì)按它們聲明的順序排序。

在下面的例子中，我們建立四個(gè)級(jí)聯(lián)層：reset，base，theme，和utilities。

@layer reset { /* 創(chuàng)建級(jí)聯(lián)層 “reset” */
  * {
    margin: 0;
    padding: 0;
  }
}

@layer base { /* 創(chuàng)建級(jí)聯(lián)層 “base” */
  …
}

@layer theme { /* 創(chuàng)建級(jí)聯(lián)層 “theme” */
  …
}

@layer utilities { /* 創(chuàng)建級(jí)聯(lián)層 “utilities” */
  …
}

按照它們的聲明順序，層順序變?yōu)椋?/span>

reset
base
theme
utilities

重復(fù)使用級(jí)聯(lián)層名稱時(shí)，樣式將附加到現(xiàn)有級(jí)聯(lián)層。級(jí)聯(lián)層的順序保持不變，因?yàn)橹挥械谝淮蔚某霈F(xiàn)已經(jīng)確定順序：

@layer reset { /* 創(chuàng)建第一個(gè)級(jí)聯(lián)層 “reset” */
  …
}

@layer base { /* 創(chuàng)建第二個(gè)級(jí)聯(lián)層 “base” */
  …
}

@layer theme { /* 創(chuàng)建第三個(gè)級(jí)聯(lián)層 “theme” */
  …
}

@layer utilities { /* 創(chuàng)建第四個(gè)級(jí)聯(lián)層 “utilities” */
  …
}

@layer base { /* 會(huì)將樣式添加至級(jí)聯(lián)層“base” */
  …
}

重新使用級(jí)聯(lián)層名稱時(shí)層順序保持不變的使@layer 語(yǔ)法變得更加方便和嚴(yán)謹(jǐn)。使用它，可以預(yù)先建立圖層順序，然后將所有 CSS 附加到它：

@layer reset;     /* 創(chuàng)建第一個(gè)級(jí)聯(lián)層 “reset” */
@layer base;      /* 創(chuàng)建第二個(gè)級(jí)聯(lián)層 “base” */
@layer theme;     /* 創(chuàng)建第三個(gè)級(jí)聯(lián)層“theme” */
@layer utilities; /* 創(chuàng)建第四個(gè)級(jí)聯(lián)層 “utilities” */

@layer reset { /* 添加樣式至級(jí)聯(lián)層 “reset” */
  …
}

@layer theme { /* 添加樣式至級(jí)聯(lián)層  “theme” */
  …
}

@layer base { /* 添加樣式至級(jí)聯(lián)層  “base” */
  …
}

@layer theme { /* 添加樣式至級(jí)聯(lián)層  “theme” */
  …
}

當(dāng)然你可以用更短的語(yǔ)法來(lái)聲明級(jí)聯(lián)層，

@layer reset, base, theme, utilities;

從上面可以看出，多個(gè)級(jí)聯(lián)層被聲明時(shí)，最后一個(gè)級(jí)聯(lián)層的聲明會(huì)獲勝。像這樣，

@import(reset.css) layer(reset); /* 第一個(gè)級(jí)聯(lián)層 */

@layer base { /* 第二個(gè)級(jí)聯(lián)層 */
  form input {
    font-size: inherit; 
  }
}

@layer theme { /*第三個(gè)級(jí)聯(lián)層 */
  input {
    font-size: 2rem;
  }
}

按以往CSS級(jí)聯(lián)來(lái)進(jìn)行分析的話，form input（多層級(jí)）的優(yōu)先級(jí)會(huì)大于input,但是由于級(jí)聯(lián)層所起的作用，@layer theme的input會(huì)取勝。

級(jí)聯(lián)層嵌套

級(jí)聯(lián)層支持嵌套使用，如下：

@layer base { /* 第一個(gè)級(jí)聯(lián)層*/
  p { max-width: 70ch; }
}

@layer framework { /* 第二個(gè)級(jí)聯(lián)層 */
  @layer base { /* 第二級(jí)聯(lián)層的嵌套子級(jí)聯(lián)層1 */
    p { margin-block: 0.75em; }
  }

  @layer theme { /* 第二級(jí)聯(lián)層的嵌套子級(jí)聯(lián)層2 */
    p { color: #222; }
  }
}

在這個(gè)例子中有兩個(gè)級(jí)聯(lián)外層：

base
framework

該framework層本身也包含兩層：
base
theme

就像一棵樹，像這樣，

如果要將樣式附加到嵌套級(jí)聯(lián)層，需要使用以下全名來(lái)引用它，

@layer framework {
  @layer default {
     p { margin-block: 0.75em; }
  }

  @layer theme {
    p { color: #222; }
  }
}

@layer framework.theme {
  /* 這些樣式會(huì)被添加到@layer framework層里面的theme層 */
  blockquote { color: rebeccapurple; }
}

@media與@layer

@media (min-width: 30em) {
  @layer layout {
    .title { font-size: x-large; }
  }
}

@media (prefers-color-scheme: dark) {
  @layer theme {
    .title { color: white; }
  }
}

如果第一個(gè)@media (min-width: 30em)匹配（基于視口尺寸），則layout級(jí)聯(lián)層層將在圖層順序中排在第一位。如果只有@media (prefers-color-scheme: dark)匹配，theme則將是第一層。

如果兩者匹配，則圖層順序?qū)閘ayout, theme。如果沒(méi)有匹配，則不定義層。

結(jié)語(yǔ)

隨著 Cascade Layers 的出現(xiàn)，我們的開發(fā)人員將擁有更多的工具來(lái)控制 Cascade。Cascade Layers 的真正力量來(lái)自它在 Cascade 中的獨(dú)特位置：Style 屬性（Style Attribute）和 CSS 選擇器權(quán)重（Specificity）之間。因此，我們不需要擔(dān)心其他層中使用的 CSS 的選擇器特異性，也不需要擔(dān)心我們將 CSS 加載到這些層中的順序.

了解到這里，是不是覺(jué)得@layer相當(dāng)?shù)豤ool，迫不及待地想去使用了，我們看一下caniuse @layer的兼容情況，

很遺憾，支持程度慘不忍睹，想真正使用可能還要再等等，對(duì)于明年三月份 Chromium 99,發(fā)布我們拭目以待。

當(dāng)然現(xiàn)在如果想嘗鮮，對(duì)于社區(qū)也有給出一些辦法，

大家也可以試一試，感謝閱讀！

在線咨詢

上一篇：Spring MVC + Java 多文件上傳及多文件中轉(zhuǎn)上傳
下一篇：前端到底離業(yè)務(wù)有多遠(yuǎn)？前端如何賦能業(yè)務(wù)？

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商