layer优先级

高级

不同的layer中的重复样式

非嵌套的layer

梗概

• 根据声明的顺序来决定，后面更优先

实例

之一

看下面这样一个例子，我们定义了两个 @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：

之一

@layer B, C, A;
div {
    width: 200px;
    height: 200px;
}
@layer A {
    div {
        background: blue;
    }
}
@layer B {
    div {
        background: green;
    }
}
@layer C {
    div {
        background: orange;
    }
}

A > C > B

嵌套的layer

梗概

• 外层 > 内层

实例

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 C > @layer C.D > @layer A > @layer A.B

相同的layer

权重作为优先级