@layer(级联层)

在css样式表(文件)中声明@layer为样式添加级联层,其意义在于可以使用它重新定义样式的叠层关系. @layer后声明的级联层里面的样式将覆盖前声明的级联层里面的相同属性.在级联层外声明的样式会覆盖级联层里面的相同属性样式,同一层级里面的样式冲突,依然按照优先级来计算.

在级联层中声明 CSS 是，优先级的顺序由声明层的顺序来决定。在任何层之外声明的 CSS 样式会被按声明的顺序组合在一起，形成一个未命名的层，它会被当作最后声明的层。对于存在冲突的常规（没有 !important 声明）样式，后面的层比先前定义的层的优先级高。但对于带有 !important 标记的样式，其顺序相反——先前的层中的 important 样式比后面的层以及为在层中声明的 important 样式优先级要高。但内联样式比所有作者定义的样式的优先级都要高，不受级联层规则的影响。

怎么说呢,就是可以用层方便管理样式,用它特有的优先权规则,就连内联样式都包含在内.

1. 用户代理样式表中的声明（例如，浏览器的默认样式，在没有设置其他样式时使用）。
2. 用户样式表中的常规声明（由用户设置的自定义样式）。
3. 作者样式表中的常规声明（这些是我们 web 开发人员设置的样式）。
4. 作者样式表中的 !important 声明
5. 用户样式表中的 !important 声明
6. 用户代理样式表中的 !important 声明

@layer B, A, C, D...N;
@layer B{h1{color:red;}
}
@layer D{h1{color:green;}
}
...

在第一行创建层叠的时候已经决定的了它们之间的顺序,所以在下面设置样式的时候就不用在意顺序了,如果没有第一行,则按照代码的执行顺序(从上到下,从左到右)来决定它们的优先权. 而且在管理层叠优先权的时候我们只需要改变第一行中的顺序就可以达到这个目的.

文档链接

• CSS Flexbox