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;
}

属性值

浏览器支持

表格中的数字表示首个完全支持该 @ 规则的浏览器版本。