CSS @layer 分層優先順序

CSS 的 @layer 是一個可以利用類似「圖層」的方式，去調整「選擇器權重」的 At 規則，這篇教學除了會介紹 @layer 的用法，還會用範例呈現 @layer 和 !important 或 animation 的權重關係。

快速導覽：

• 認識 @layer 與權重的關係
• 開始使用 @layer

教學影片

搭配教學影片一起閱讀，效果會更好！歡迎大家訂閱 STEAM 教育學習網的 Youtube 頻道。

前往：https://www.youtube.com/@steam.oxxostudio

認識 @layer 與權重的關係

在「CSS 選擇器的優先順序 ( 權重 )」教學中，有深入介紹選擇器的各種權重計算方式，然而如果額外使用了 @layer 的 At 規則，則會在原本的權重當中，按照下圖加入 @layer 所定義的「分層權重」，需要注意的是如果有多個 @layer 裡的樣式有出現 !important 的宣告，則權重改成由「前往後覆蓋」，會與單純 @layer 的「由後往前覆蓋」剛好相反。

參考：CSS 選擇器的優先順序 ( 權重 )

開始使用 @layer

@layer 的寫法需要分成「兩個部分」，第一個部分為「陳述式 statement」，目的在於規定哪個 layer 在前哪個在後，layer 從前往後的順序，對應上方權重圖由下往上的順序 ( 結尾需要有分號 )。

@layer layer1 layer2 layer3 ... layerN;

第二部分是「規則定義 At rule」，也就是將不同的樣式進行分層，在 @layer 後方設定該組樣式的 layer 名稱，將樣式放在其中即可。

@layer layer1 {
  div {....}
}
@layer layer2 {
  div {....}
}
@layer layer3 {
  div {....}
}

下方範例會使用兩個 div，分別套用有 !important 和沒有 !important 的樣式，從中可以發現因為陳述式 statement 的順序不同，導致兩個顏色的結果就會不同，有 !important 是「前蓋後」，沒有 !important 的是「後蓋前」。

線上展示：https://codepen.io/oxxo/pen/ByNYdLg

<!-- HTML 程式碼 -->
<h2 class="a">APPLE</h2>
<h2 class="b">APPLE</h2>

<!-- CSS 程式碼 -->
<style>
  @layer a1, a2;

  @layer a1 {
  .a {color: red;} 
  .b {color: red!important;} 
  }

  @layer a2 {
  .a {color: green}
  .b {color: green!important;} 
  }
</style>

反之，如果將陳述式顛倒，就會看見畫面文字出現顏色相反的狀況。

@layer a2, a1;

下方的範例會使用四個 div，分別呈現 @layer、使用者撰寫樣式、有無 !important 和 animation 對於「不同權重」的呈現方式，可以特別觀察「放在 @layer 裡面和外面」的權重差異。

線上展示：https://codepen.io/oxxo/pen/QwLxRER

<!-- HTML 程式碼 -->
<h2 class="a">有 important ( 紅色 )</h2>
<h2 class="b">沒有 !important ( 青色 )</h2>
<h2 class="c">顯示 layer 之外的樣式 ( 黑色 )</h2>
<h2 class="d">顯示動畫顏色 ( 綠色 )</h2>

<!-- CSS 程式碼 -->
<style>
  @layer a1, a2, a3;   /* 定義層級順序 */

  @layer a1 {
    .b, .c, .d {color: red;}
    .a {color: red!important;}      /* a1 a2 a3 層級中權重最大 */
  }

  @layer a2 {
    .b, .c, .d {color: green;}
    .a {color: green!important;}
  }

  @layer a3 {
    .b, .c, .d {color: cyan;}       /* a1 a2 a3 層級中權重最大 */
    .a {color: cyan!important;}
  }

  .a {color: black!important;}      /* 和層級比較權重之後權重較小，不會顯示黑色 */
  .c {color: black;}                /* 和層級比較權重之後權重較大，顯示黑色 */
  .d {animation: oxxo 2s infinite;} /* 和層級比較權重之後權重較大，顯示動畫顏色 */

  @keyframes oxxo {
    0% {color: #090;}
    50% {color: #0f0;}
    100% {color: #090;}
  }
</style>

小結

透過 @layer 可以更有系統地去管理 CSS 樣式結構，提升可讀性與維護性，只要能熟練掌握，就將能讓網頁的樣式編寫更具彈性，也更符合現代前端開發的需求。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～