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

প্রতিভূত মান

ব্রাউজার সমর্থন

টেবিলের সংখ্যা এই @ রুলটির পূর্ণাঙ্গ সমর্থনকারী প্রথম ব্রাউজার সংস্করণকে নির্দেশ করে。