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