分层优先级 ( @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 样式结构，提升可读性与维护性，只要能熟练掌握，就将能让网页的样式编写更具弹性，也更符合现代前端开发的需求。

意见反馈