手册
目录
收藏632
分享
阅读1027
更新时间2025-07-16
CSS @layer 规则可用于控制 CSS 层叠层（cascade layers）评估样式的顺序。
这是通过首先定义一个层，然后将需要按特定顺序评估的规则集包裹在该层中来实现的。
@layer 可以带名称或不带名称定义。
不带名称的 @layer 称为匿名层。匿名层按照声明的顺序进行评估（请参阅下面的例子）。它们遵循默认的层叠顺序（从上到下）。
带有唯一名称的 @layer 称为命名层。通过命名层，我们可以指定所需的精确层叠顺序（见下方示例）。顺序从最不具体到最具体，从左到右排列。
使用匿名层（将遵循默认的层叠顺序——从上到下）：
/* 层 1 */
@layer {
body {
background: pink;
}
}
/* 层 2 */
@layer {
body {
background: lightblue; /* 最后一个层生效 */
}
}
运行实例 »点击 "运行实例" 按钮查看在线实例
使用命名层（并指定所需的精确层叠顺序）：
/* 指定精确的层叠顺序 */
@layer bgblue, bgpink;
/* 层 1 */
@layer bgpink {
body {
background: pink; /* 生效 */
}
}
/* 层 2 */
@layer bgblue {
body {
background: lightblue;
}
}
运行实例 »点击 "运行实例" 按钮查看在线实例
@layer name {
css declarations;
}
| 值 | 描述 |
|---|---|
| name | 可选。定义层叠层的名称。 |
表格中的数字表示首个完全支持该 @ 规则的浏览器版本。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 99 | 99 | 97 | 15.4 | 86 |
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.2万人学习
共49课时
77万人学习
共29课时
61.7万人学习
共25课时
39.3万人学习
共43课时
70.9万人学习
共25课时
61.6万人学习
共22课时
23万人学习
共28课时
33.9万人学习
共89课时
125万人学习
