【Day12】CSS優先級的解藥 - CSS @layer

15th鐵人賽

卡羅奇奇

2023-09-27 00:15:03

283 瀏覽

分享至

CSS @layer

@layer支援度:Can I Use)

大家一定都遇過CSS怎樣都蓋不過，打架的問題，最後只能使出大絕!important(~~小孩子不要學~~)。
@layer就可以解決這個問題，@layer可以將CSS樣式分層，控制CSS樣式的priority。

@layer是什麼?

CSS@layer顧名思義就是可以將CSS樣式分為不同的層，幫助開發者更方便的控制CSS樣式。
可以將定義出的層排序，層中的樣式就會按照該層的順序進行疊加，從前到後。
CSS@layer通常解決以下問題:樣式衝突/樣式重複出現/樣式優先級。

我們來看看實際案例

都用@layer定義樣式:排序在後的樣式會覆蓋掉前面的，優先序:B>A，所以結果會是@layer B的樣式

/* excample 1 */
.container{
    width:100px;
    height:100px;
    border:1px solid red;
}
@layer A {
  .container{
    background-color:white;
  }
}
@layer B {
  .container{
    background-color:black;
  }
}

在最前面定義 @layer優先序@layer B,A;，後面的優先序大於前面的，所以優先序:A>B，所以最後會呈現@layer A的樣式

/* excample 2 */
@layer B,A;
.container{
    width:100px;
    height:100px;
    border:1px solid red;
}
@layer A {
  .container{
    background-color:white;
  }
}
@layer B {
  .container{
    background-color:black;
  }
}

@layer包住的樣式和沒@layer包住的樣式，沒@layer包住的樣式>@layer包住的樣式，優先序:沒@layer包住的樣式>B>A，

/* excample 3 */
.container{
    width:100px;
    height:100px;
    border:1px solid red;
    background-color:blue;
}
@layer A {
  .container{
    background-color:white;
  }
}
@layer B {
  .container{
    background-color:black;
  }
}

匿名@layer和定義好名字的@layer優先序呢?一樣後面的優先序大於前面，優先序:匿名@layer>B>A，

/* excample 4 */
.container{
    width:100px;
    height:100px;
    border:1px solid red;
}
@layer A {
  .container{
    background-color:white;
  }
}
@layer B {
  .container{
    background-color:black;
  }
}
@layer {
   .container{
    background-color:yellowgreen;
  }
}

嵌套層@layer優先序比較，如果看內層的@layer，可以想像成是有@layer包覆的樣式與沒有@layer的樣式比較，就如同上方第3點說明，優先序:匿名`B>B.D>A>A.C，

@layer A {
  @layer B{
    ...
  }
}
等同於
@layer A.B

/* excample 5 */
.container{
    width:100px;
    height:100px;
    border:1px solid red;
}
@layer A {
  .container{
    background-color:white;
  }
  @layer C {
    .container{
      background-color:gray;
    }
  }
}
@layer B {
  .container{
    background-color:black;
  }
  @layer D {
   .container{
      background-color:yellowgreen;
    }
  }
}

6.非!important的比較下，!important的優先序還是最高的，優先序:A>沒@layer`包住的樣式>B，

/* excample 6 */
.container{
    width:100px;
    height:100px;
    border:1px solid red;
    background-color:pink;
}
@layer A {
  .container{
    background-color:white !important;
  }
}
@layer B {
  .container{
    background-color:black;
  }
}

7.正常來說沒@layer包覆的樣式優先序會大於@layer包覆的，但是在兩者都有!important的比較下，!important的優先序剛好相反，因此優先序:A>沒@layer`包住的樣式>B。

/* excample 7 */
.container{
    width:100px;
    height:100px;
    border:1px solid red;
    background-color:pink !important;
}
@layer A {
  .container{
    background-color:white !important;
  }
}
@layer B {
  .container{
    background-color:black;
  }
}