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

未被 @layer 包裹的样式 > @layer C > @layer B > @layer A
匿名层与嵌套层还有两种层级关系，分别是匿名层和嵌套层。
匿名层允许创建一个不带名字的 @layer：
@layer { p { margin: 1rem; }}这里，创建了一个匿名层。匿名层的两个重要特性：

看一个例子：
<div></div>div { width: 200px; height: 200px;}@layer { div { background: pink; }}@layer B, C, A;@layer A { div { background: blue; }}@layer B { div { background: green; }}@layer C { div { background: orange; }}上述代码，我们首先定义了一个匿名层，指定了 div 的颜色为 pink ，而后又定义了 @layer B, C, A 。这里优先级顺序为：
A > C > B > 匿名层
最终的颜色为 @layer A 内的颜色值 -- blue：

文章插图

如果，我们将匿名层放在最后的话：
div { width: 200px; height: 200px;}@layer B, C, A;@layer A { div { background: blue; }}@layer B { div { background: green; }}@layer C { div { background: orange; }}@layer { div { background: pink; }}此时，样式的优先级顺序为：
匿名层 > A > C > B
最终的颜色为匿名层内的颜色值 -- pink：

文章插图

嵌套层说完了匿名层，我们再来看看嵌套层。
顾名思义，嵌套层的意思就是在 @layer 内部，我们可以再嵌套使用 @layer 级联层。像是这样：
@layer A { @layer B{ ... }}当然，它还有另外一种语法，上述代码等价于：
@layer A.B { ...}了解了这个后，那么，看这样一个例子：
<div></div>div { width: 200px; height: 200px;}@layer A { div { background: blue; } @layer B { div { background: red; } }}我们在 @layer A 中嵌套一个 @layer B ，同时都定义了一个 div 的样式，最终 div 的 background 到底是什么颜色呢？
最终为蓝色 background: blue ，为什么呢？这个很好记忆，我们假设如果没有 @layer A 这一层包裹，其实就是上述说的 @layer 层与非 @layer 层的优先级比较，这里，非 @layer 层（我们可以理解为更高级别的一层 @layer）的优先级更高。
因此，对于单个 @layer 内的嵌套关系，样式优先级为：
@layer A > @layer A.B
多层嵌套层的优先级关系OK ，再看这样一种情况：
div { width: 200px; height: 200px;}@layer A { div { background: blue; } @layer B { div { background: red; } }}@layer C { div { background: yellow; } @layer D { div { background: green; } }}这里存在同时存在多个嵌套 @layer 的情况。那么这种情况优先级又是如何划分呢？
这里的规则是，优先级高的 @layer ，无论是否存在嵌套，优先级都整体比优先级低的 @layer（无论是否存在嵌套）高，因此，这里的优先级排序是：
@layer C > @layer C.D > @layer A > @layer A.B
!important 对 CSS @layer 的影响再来看看 !important 对 CSS @layer 的影响。
这里可以分为几种情况，先看其中一种：
<div></div>div { width: 200px; height: 200px; background: black;}@layer A { div { background: blue; } @layer B { div { background: red; } }}@layer C { div { background: yellow; } @layer D { div { background: green!important; } }}上述代码，我们给 @layer C.D 的 <div> 添加了一个 !important 规则。
如果，不考虑 !important 规则，那么实际的 CSS 优先级为（序号越高，优先级越高）：

那么， <div> 的颜色应该为黑色 black 。然而，这里给 @layer C.D 的 <div> 添加了一个 !important 规则。
实际上，最终 <div> 的颜色为 green ，也就是最终的优先级排序为（序号越高，优先级越高）：