CSS @layer 規則

定義和用法

CSS @layer 規則可用于控制 CSS 層疊層（cascade layers）評估樣式的順序。

這是通過首先定義一個層，然后將需要按特定順序評估的規則集包裹在該層中來實現的。

@layer 可以帶名稱或不帶名稱定義。

不帶名稱的 @layer 稱為匿名層。匿名層按照聲明的順序進行評估（請參閱下面的例子）。它們遵循默認的層疊順序（從上到下）。

帶有唯一名稱的 @layer 稱為命名層。通過命名層，我們可以指定所需的精確層疊順序（見下方示例）。順序從最不具體到最具體，從左到右排列。

實例

例子 1

使用匿名層（將遵循默認的層疊順序——從上到下）：

/* 層 1 */
@layer {
  body {
    background: pink;
  }
}
/* 層 2 */
@layer {
  body {
    background: lightblue; /* 最后一個層生效 */
  }
}

親自試一試

例子 2

使用命名層（并指定所需的精確層疊順序）：

/* 指定精確的層疊順序 */
@layer bgblue, bgpink;
/* 層 1 */
@layer bgpink {
  body {
    background: pink; /* 生效 */
  }
}
/* 層 2 */
@layer bgblue {
  body {
    background: lightblue;
  }
}

親自試一試

CSS 語法

@layer name {
  css declarations;
}

屬性值

瀏覽器支持

表格中的數字表示首個完全支持該 @ 規則的瀏覽器版本。