layer

适用范围

• 用于按模块调节CSS优先级
  • 一个模块对应一个layer
  • 自己定义的CSS也视为一个layer
  • 把自己的layer优于第三方模块的layer

实例

举个例子。我们需要引入第三方库的 CSS，为了便于管理，或者便于覆盖其中的一些样式，在之前，只能通过写优先级更高的class去覆盖，或者通过!important去覆盖。
有了 @layer 之后，可以这样写：

@import(elementUI.css) layer(elementUI);  
@import(page.css) layer(page);  

这样，对于想覆盖掉 elementUI 内的某个样式，不需要考虑选择器的优先级，只要在page.css 里面写的，优先级都会比 elementUI.css 内的 CSS 优先级更高。（!important 规则除外）

创建layer

直接声明layer

实例

child::

之一

看下面这样一个例子，我们定义了两个 @layer 级联层 A 和 B：

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：

指向原始笔记的链接

将normal CSS转换为layer

• child::import layer
• child::link layer

layer的优先级

child::layer优先级