详解 css 新特性 级联层@layer
介绍
@layer又名级联层，是 css2022 推出的新特性，目的是用来解决样式被覆盖，使用混乱的场景。
同一层内的规则将级联在一起， 这给予了开发者对层叠机制的更多控制，让 CSS 样式按照我们定义好的级联顺序展示，起到控制不同样式间的优先级的作用。
语法
/* 创建了一个名字为a的级联层 */
@layer a {
div {
background-color: red;
}
}我们也可以先定义级联层，之后再补充规则
@layer a,b,c;
@layer a {
div {
background-color: red;
}
}
@layer b {
#box {
background-color: blue;
}
}
@layer c {
div {
background-color: green;
}
}级联层的执行顺序将会按照定义的时候的先后顺序执行，所以，最终会执行 c 的级联层，得到一个蓝色的 div，即使级联层 b 是一个 id 选择器，仍然是最后一个级联层会生效
此时的级联层的顺序是@layer c > @layer b > @layer a
由此，我们可以大致得出一个结论：可以利用级联层将 css 进行模块的划分，按照先后顺序，更好的控制样式。
怎么引用
引用的方式分为三种
- 内部引入
直接创建一个 @layer 规则，其中包含作用于该层内部的 CSS 规则：
@import引入
@import(index.css) layer(a);
/* - 命名方式 */
/* 创建带命名的级联层，但不指定任何样式。样式随后可在 CSS 内任意位置添加 */
@layer a;
@layer a {
div {
color: red;
}
}非 @layer 包裹层与 @layer 层内样式优先级
没有被 @layer 包裹的样式和被 @layer 包裹的样式相比，那个优先级更高呢。
@layer A {
div {
background: red;
}
}
@layer B {
div {
background: orange;
}
}
@layer C {
div {
background: yellow;
}
}
div {
background: green;
}最终为绿色，这里会有一个非常重要的结论，非 @layer 包裹的样式，拥有比 @layer 包裹样式更高的优先级，因此，上述规则的排序是：未被 @layer 包裹的样式 > @layer C > @layer B > @layer A
级联层的规则
级联层可以像上面的案例一样，简单命名，也可以设置匿名使用方式和嵌套使用方式 ### 匿名 允许创建一个不带名字的 @layer：
@layer {
p {
margin: 1rem;
}
}这里，创建了一个匿名层。匿名层的两个重要特性：
- 创建后无法向其再添加规则
- 该层和其他命名层功能一致，优先级也遵循后定义的匿名层，比其他已定义的
@layer层，优先级更高
@layer a,b,c;
@layer {
div {
background: orange;
}
}
@layer a {
div {
background-color: red;
}
}
@layer b {
#box {
background-color: green;
}
}
@layer c {
div {
background-color: blue;
}
}最终展示匿名层的样式，此时的优先级的顺序为 匿名层@layer > @layer c > @layer b > @layer a > @layer a
嵌套层
嵌套层的意思就是在 @layer 内部，我们可以再嵌套使用 @layer 级联层
@layer A {
@layer B {
...;
}
}上述代码等价于
@layer A.B {
...;
}那么这里的样式谁优先呢
@layer A {
div {
background: blue;
}
@layer B {
div {
background: red;
}
}
}最终为蓝色, 对于单个 @layer 内的嵌套关系，样式优先级为 @layer A > @layer A.B
!important 对 CSS @layer 的影响
div {
background: black;
}
@layer A {
div {
background: blue !important;
}
}
@layer C {
div {
background: green;
}
}最终会展示!important的样式，也就是说!important的规则更加优先。
那么，接下来这个场景呢?
div {
background: black !important;
}
@layer A {
div {
background: blue !important;
}
}
@layer C {
div {
background: green;
}
}在上述代码中，非级联层和级联层 A 中各添加了一个!important, 结果为蓝色。
这是一个非常重要的特性，在比较正常（非 !important）规则时，越是级联（排序较后的 @layer 规则），优先级越低；反之，在比较 !important 规则时，越是级联靠后的（排序较后的 @layer 规则），优先级越高。
!important在比较的时候遵循下面的规则
!important样式高于非!important样式- 在比较
!important规则时，优先级顺序与正常规则相反，在正常状态下优先级越低的，在!important下优先级越高。