介绍

　　@layer又名级联层，是 css2022 推出的新特性，目的是用来解决样式被覆盖，使用混乱的场景。

　　同一层内的规则将级联在一起， 这给予了开发者对层叠机制的更多控制，让 CSS 样式按照我们定义好的级联顺序展示，起到控制不同样式间的优先级的作用。

　　语法

　　@layer a {

　　div {

　　background-color: red;

　　}

　　}

　　创建了一个名字为a的级联层

　　我们也可以先定义级联层，之后再补充规则

　　@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 下优先级越高。

上一篇

什么叫动态合批?跟静态合批有什么区别?

下一篇

一文了解Vue3新变化