CSS @layer 分層優先順序

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

快速導覽：

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

認識 @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，分別呈現 @layer、使用者撰寫樣式、有無 !important 和 animation 對於「不同權重」的呈現方式。

線上展示：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 {
    .a, .c, .d {color: red;}
    .b {color: red!important;}      /* a1 a2 a3 層級中權重最大 */
  }
    
  @layer a2 {
    .a, .c, .d {color: green;}
    .b {color: green!important;}
  }
    
  @layer a3 {
    .a, .c, .d {color: cyan;}       /* a1 a2 a3 層級中權重最大 */
    .b {color: cyan!important;}
  }

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

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

小結

@container 是一個新的 CSS 定義，在舊版的瀏覽器或部分ㄓ Firebox 上並不支援，但如果不考慮這些瀏覽器，@container 對於 RWD 響應式網頁而言，是個相當不錯的功能，如果有機會不妨使用看看吧。

意見回饋

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