[email protected]

<div>test</div>

div {
  background-color: yellow;
  width: 100px;
  height: 100px;
}

div {
  background: skyblue;
}

使用@layer降低 css 的层级

从这段代码，一眼就能看出来 div 的背景色一定是skyblue。如果把下面的 css 代码使用@layer包裹起来，就会把这段样式的层级降低，因此 div 的背景色就成了yellow

div {
  background-color: yellow;
  width: 100px;
  height: 100px;
}

@layer {
  div {
    background: skyblue;
  }
}

给@layer添加名字，手动指定其层级

还可以给@layer起一个名字，还是这段 css 样式：

@layer l1 {
  div {
    background-color: yellow;
    width: 100px;
    height: 100px;
  }
}

@layer l2 {
  div {
    background-color: skyblue;
  }
}

只是加个名字，并不会改变 css 的默认渲染优先级。这个 div 最终渲染还是skyblue。如果想让l1的优先级比l2高，需要再加一句：

@layer l2, l1;

@layer嵌套

这段代码渲染完，div 的背景色一定是yellow。因为l2被嵌套在l1中，它的层级就会比l1要低。也就是说：被嵌套的越深，层级越低

@layer l1 {
  div {
    background-color: yellow;
    width: 100px;
    height: 100px;
  }

  @layer l2 {
    div {
      background-color: skyblue;
    }
  }
}

在@import中使用@layer

在@import的时候，可以使用@layer来指定优先级，目前还没有浏览器支持

@import 'theme.css' @layer(theme);

在link标签上使用layer属性

目前还没有浏览器支持

<link rel="stylesheet" href="./style.css" layer="base" />