使用 CSS 最困難的部分之一是處理CSS的權(quán)重值，它可以決定到底哪條規(guī)則會(huì)最終被應(yīng)用，尤其是如果你想在 Bootstrap 這樣的框架中覆蓋其已有樣式，更加顯得麻煩。不過隨著 CSS 層的引入，這一切都發(fā)生了變化。 這個(gè)新功能允許您創(chuàng)建自己的自定義 CSS 層，這是有史以來第一次確定所有 CSS 代碼權(quán)重的層次結(jié)構(gòu)。 在本文中，我將剖析這對您意味著什么，它是如何工作的，以及您今天如何開始使用它。
什么是層(Layers)
創(chuàng)建您自己的自定義圖層是 CSS 的新功能，但圖層從一開始就存在于 CSS 中。 CSS 中有 3 個(gè)不同的層來管理所有樣式的工作方式。
瀏覽器（也稱為用戶代理）樣式 – user agent style用戶樣式 – User Styles作者樣式 – Author Styles
瀏覽器樣式是應(yīng)用于瀏覽器的默認(rèn)樣式。這就是為什么 Chrome 和 Safari 中的按鈕看起來不同的原因。在瀏覽器層中找到的樣式在瀏覽器之間是不同的，并且給每個(gè)瀏覽器一個(gè)獨(dú)特的外觀。
下一層是用戶樣式，這并不是您真正需要擔(dān)心的事情。這些通常是用戶可以編寫并注入瀏覽器的自定義樣式，但瀏覽器不再真正支持這些樣式。用戶可能會(huì)更改一些瀏覽器設(shè)置，這些設(shè)置會(huì)向該圖層添加樣式，但在大多數(shù)情況下，可以完全忽略該層。
最后，我們來到作者層。這是您最熟悉的層，因?yàn)槟帉懙拿恳欢?CSS 代碼都屬于這一層。
這些層分開的原因是因?yàn)樗梢院苋菀椎馗采w瀏覽器樣式和用戶樣式中定義的代碼，因?yàn)閷佣x了自己的層次結(jié)構(gòu)，完全忽略了權(quán)重的影響。
這 3 個(gè) CSS 層是有序的（瀏覽器樣式、用戶樣式、然后是作者樣式），后面層中的每個(gè)樣式都將覆蓋前一層的任何樣式。這意味著即使瀏覽器樣式定義了一個(gè)超級特定的選擇器，例如#button.btn.super-specific，并且您的作者樣式定義了一個(gè)超級通用的選擇器，例如按鈕，您的作者樣式仍然會(huì)覆蓋瀏覽器樣式。
這實(shí)際上已經(jīng)是您可能一直在使用而沒有意識(shí)到的東西。
* { box-sizing: border-box;}
上面的選擇器沒有權(quán)重，因?yàn)?* 符號對權(quán)重沒有貢獻(xiàn)。 這意味著例如使用 p 作為選擇器的 p 標(biāo)簽的瀏覽器樣式在技術(shù)上比 * 選擇器更具體，權(quán)重更高。 但是，這一切并不重要，因?yàn)樽髡邩邮轿挥诒葹g覽器樣式層晚的層中，因此您的代碼將始終覆蓋瀏覽器樣式。
理解這一點(diǎn)至關(guān)重要，因?yàn)槭褂眠@個(gè)新的圖層 API，您可以在作者圖層中創(chuàng)建自己的圖層，從而更輕松地處理特定性。
如何創(chuàng)建你自己的層
下面來看個(gè)例子：
很明顯，這是我們正常理解的CSS， ID設(shè)置的顏色權(quán)重更高，所以按鈕顯示為紅色。讓我們使用@layer給它們加上兩個(gè)層，看看是什么效果：
按鈕變成藍(lán)色。為什么會(huì)這樣？
我們給兩條CSS分別建立了base和utilities層，很明顯，后面創(chuàng)建的層的樣式覆蓋了前面層的樣式，盡管前面層的樣式有更高的權(quán)重。這就是層的默認(rèn)工作原理。當(dāng)然層的順序是可以指定的，
@layer utilities, base;
@layer utilities, base;
您需要做的就是編寫@layer 關(guān)鍵字，后跟以逗號分隔的層列表。 這將按從左到右的順序定義所有層，其中列出的第一層到最后一層的權(quán)重是依次增加的。 然后，您可以稍后使用普通的@layer 語法向每個(gè)層添加代碼，而不必?fù)?dān)心定義層的順序，因?yàn)樗鼈兌荚谶@一行中定義。 需要注意的是，這行代碼必須在定義任何層之前出現(xiàn)，所以我通常將它作為我的 CSS 文件中的第一行。如上圖，通過指定層的順序，我們讓base層應(yīng)用在utilities層之后，所以按鈕又顯示為紅色。
導(dǎo)入層
上面這兩種方式都是導(dǎo)入bootstrap框架的CSS，并且把他們放在framework層中，這樣你如果想要覆蓋它已有的樣式，只需要新建一個(gè)自己的層，放置在framework層后面就行。像下面這樣。
匿名層
匿名層不常用，但它寫在后面可以覆蓋其他層的樣式，像下面可以把按鈕設(shè)為橙色。
不在層里的樣式
不在層里的樣式會(huì)有更高的權(quán)重，下面這個(gè)列表會(huì)讓你看得更清楚覆蓋是怎么發(fā)生的
層還可以重疊設(shè)置，不過很少用。具體的用法可以查閱相關(guān)文檔。
瀏覽器支持
自從IE死了以后，所有主流瀏覽器都已支持這一特性。大家請放心使用。
