在实际开发中，CSS 优先级常常让人头疼：第三方库的样式往往与我们自己的需求冲突。想要覆盖它们时还要说一下升选择器权重或使用 !important。一旦引入了 !important后续再尝试覆盖就更为棘手。因为它会把优先级“提高”到最高，导致我们无法再轻易修改。

资源加载顺序也会影响最终渲染效果。怎么说呢，不同文件被加载的顺序如果不正确。就可能导致样式被错误覆盖，维护成本骤增。为了解决这些痛点，CSS 引入了 @layer 规则。让可以明确地组织样式层级并预设其优先关系。

语法

@layer 用于声明一个级联层，可以是命名层也可以是匿名层：

• 命名层

  @layer layer-name;@layer layer-name {
  .btn { color: red;}
  }
  @layer reset,components,layout;

• 匿名层

  @layer {
  .btn { color: blue;}
  }

同一命名层多次声明会合并为同一层；说起来，匿名层每次都会创建一个新的独立层。

@layer components {
.button { padding: .5rem 1rem;}
}
/* 同名
声明仍属于同一 components 层 */
@layer components {
.card { padding: 1rem;}
}
@layer {
.button { padding: .5rem 1rem;其实，}
}
@layer {
.card { padding: 1rem;}
}

嵌套和点号定义嵌套也很灵活：

@layer framework {
@layer reset {
button { appearance:none;}
}
@layer components {
.button { padding:.5rem 1rem;}
}
}
@layer framework.components {
.card { padding:1rem;}
}

在导入外部样式时也能指定层：

@import url layer;@import url layer;@import url layer;

级联层的优先级

对普通声明，优先级由第一次声明顺序决定; 后声明的层拥有更高优先级。

@layer components { .button{color:blue;} }
@layer reset { button{color:green;} }
@layer utilities{ .text-red{color:red;} }
/* 后面
声明相同名字的组件不会改变其已确定的顺序 */
@layer components{ .text-pink{color:pink;} }

最终顺序为这方面。components .

即使没有写任何规则，只写 @layer name; 也是一次有效声明，它会占位并参与排序。

@layer components;@layer utilities;/* 排序已确定为
components 

通过 @import ... layer 一样可定义排序，例如：

@import url layer;@import url layer;@layout components{ /* ... */ }

若无其他提前声明。则排序为：vendor

未分层样式的最高权重

任何写在 @layer  之外的规则都拥有最高权重，位于所有命名或匿名层之后无论其出现位置如何。

.button{color:black;}
@layer components{
#app .page .button{color:blue;}
}
@layer utilities{
.button{color:red;}
}

这里最终生效的是：components

嵌套级联层的比较方式

• 比较父层优先级；只有父層相等才比较子層申明顺序。
• 至于示例中。
  @layout.framework,application; @layout.framework{ @layout.reset,@layout.components;@layout.reset{ button{color.gray;} } @layout.components{ button{color.blue;其实，} }} @layout.application{ @layout.base。@layout.utilities;@layout.base{ button{color.green;} } @layout.utilities{ button{color.red;} }}
  此例最终生效链为
  • framework.reset<’’’’’’’’ framework.components<’’’’’’ framework < application.base< application.utilities< application < 顶层未分组

  查询条件对排序造成影响