一文了解CSS3中的新特性@layer _生活百科

本篇文章带大家一起深入了解一下CSS3中的新特性@layer ，希望对大家有所帮助！

文章插图

步入 2022 ， CSS 的新特性层出不穷，而最近在 CSS 圈最受瞩目的新特性，非 CSS @layer 莫属。
本文，将用最简洁的语言，快速让读者们搞懂，到底什么是 CSS @layer 新规范。
过往 CSS 优先级中存在的问题如果我们的页面上存在非常多的样式，譬如有我们开发页面的时候的自定义样式，也有引入的组件库样式。这时候样式将会非常混乱难以管理。
当我们想覆盖一些本身非我们书写的样式时候，往往不得不通过使用优先级权重更高的样式名，去覆盖那些样式。
同时，当样式优先级感到难以控制时，开发者习惯滥用 !important 去解决，这又循环导致了后续更混乱的样式结构。
基于让 CSS 得到更好的控制和管理的背景， CSS @layer 应运而生。
何为 CSS @layer？CSS @layer 从 CSS Cascading and Inheritance Level 5 被规范定义。
何为 CSS @layer？简单而言， CSS @规则中的@layer声明了一个级联层，同一层内的规则将级联在一起，这给予了开发者对层叠机制的更多控制。
语法也非常简单，看这样一个例子：
@layer utilities { /* 创建一个名为 utilities 的级联层 */}这样，我们就创建一个名为 utilities 的 @layer 级联层。
@layer 级联层如何使用呢？
通过 @layer 级联层管理样式优先级@layer 级联层最大的功能，就是用于控制不同样式之间的优先级。
看下面这样一个例子，我们定义了两个 @layer 级联层 A 和 B：
<div></div>div { width: 200px; height: 200px;}@layer A { div { background: blue; }}@layer B { div { background: green; }}由于 @layer B 的顺序排在 @layer A 之后，所以 @layer B 内的所有样式优先级都会比 @layer A 高，最终 div 的颜色为 green：

文章插图

当然，如果页面内的 @layer 太多，可能不太好记住所有 @layer 的顺序，因此，还有这样一种写法。
我们可以同时命名多个 @layer 层，其后再补充其中的样式规则。
<div></div>@layer B, C, A;div { width: 200px; height: 200px;}@layer A { div { background: blue; }}@layer B { div { background: green; }}@layer C { div { background: orange; }}上述代码，我们首先定义了 @layer B, C, A 三个 @layer 级联层。而后再后面的 CSS 代码中补充了每个级联层的 CSS 代码，但是样式的优先级为：
A > C > B
因此，最终的 div 的颜色值为 @layer A 中定义的颜色，为 blue：

文章插图

到这里， CSS @layer 的作用可以清晰的被窥见。
利用 CSS @layer ，我们可以将 CSS 不同模块划入不同的 @layer 中，利用先后顺序，非常好的去控制全局的样式优先级。
@layer 级联层的三种定义引入方式上面其实提到了两种 @layer 级联层的定义引入方式，这里再描述下，一共有 3 种引入 CSS @layer 级联层的方式。
1、直接创建一个块级的 @layer 规则，其中包含作用于该层内部的CSS规则：
@layer utilities { p { padding: .5rem; }}2、一个级联层可以通过 @import 来创建，规则存在于被引入的样式表内：
@import(utilities.css) layer(utilities);3、创建带命名的级联层，但不指定任何样式。样式随后可在 CSS 内任意位置添加：
@layer utilities;// ...// ...@layer utilities { p { color: red; }}非 @layer 包裹层与 @layer 层内样式优先级当然，这里还会有一种情况，没有被 @layer 包裹的样式，它的优先级和被 @layer 包裹的样式相比，又会如何呢？
看这样一个例子：
@layer A { a { color: red; } }@layer B { a { color: orange; } }@layer C { a { color: yellow; } }a { color: green; } /* 未被 @layer 包裹的样式 */这里会有一个非常重要的结论，非 @layer 包裹的样式，拥有比 @layer 包裹样式更高的优先级，因此，上述规则的排序是：