@layer

/* statement at-rules */
@layer layer-name;
@layer layer-name, layer-name, layer-name;

/* block at-rules */
@layer {rules}
@layer layer-name {rules}

其中

layer-name

是级联层的名称。

rules

是级联层中 CSS 规则的集合。

级联层内的规则相互级联，为 Web 开发人员提供对级联的更多控制。未在层中定义的样式始终会覆盖在命名层和匿名层中声明的样式。

下图显示了层优先级，其中层按 1、2、...、N 顺序声明。

声明顺序很重要。第一个声明的层具有最低优先级，最后一个声明的层具有最高优先级。但是，当使用!important标志时，优先级会反转。

@layer at-规则用于以三种方式之一创建级联层。

第一种方法是使用 @layer 块 at-规则创建一个命名级联层，并将该层的 CSS 规则放在其中，如下所示

@layer utilities {
  .padding-sm {
    padding: 0.5rem;
  }

  .padding-lg {
    padding: 0.8rem;
  }
}

第二种方法是使用 @layer 语句 at-规则创建一个或多个逗号分隔的命名级联层，而不分配任何样式。这可以是一个单独的层，如下所示

@layer utilities;

可以一次定义多个层，如下所示

@layer theme, layout, utilities;

这很有用，因为声明层的初始顺序指示哪个层具有优先级。与声明一样，如果在多个层中找到声明，则最后一个列出的层将获胜。因此，在前面的示例中，如果在 theme 和 utilities 中找到冲突规则，则 utilities 中的规则将获胜并应用。

即使 utilities 中的规则比 theme 中的规则具有更低的特异性，也会应用该规则。这是因为一旦建立了层顺序，就会忽略特异性和出现顺序。这使得创建更简单的 CSS 选择器成为可能，因为您不必确保选择器具有足够高的特异性来覆盖冲突规则；您只需要确保它出现在后面的层中即可。

第三种方法是使用 @layer 块 at-规则在不包含层名称的情况下创建未命名的层。例如

@layer {
  p {
    margin-block: 1rem;
  }
}

这会创建一个匿名级联层。此层的功能与命名层相同；但是，以后无法为其分配规则。匿名层的优先级顺序是声明层的顺序（无论是否命名），并且低于在层外部声明的样式。

创建级联层的另一种方法是使用@import。在这种情况下，规则将位于导入的样式表中。请记住，@import规则必须位于所有其他类型规则之前，除了@charset和@layer规则。

@import "theme.css" layer(utilities);

层可以嵌套。例如

@layer framework {
  @layer layout {
  }
}

要将规则追加到framework内部的layout层，请使用.连接这两个名称。

@layer framework.layout {
  p {
    margin-block: 1rem;
  }
}

@layer = 
  @layer <layer-name>? { <rule-list> }  |
  @layer <layer-name># ;                

<layer-name> = 
  <ident> [ '.' <ident> ]*  

在下面的示例中，创建了两个 CSS 规则。一个用于任何层外部的<p>元素，另一个用于名为type的层内的.box p。

如果没有层，选择器.box p将具有最高的特异性，因此，文本Hello, world!将以绿色显示。由于type层位于用于保存非层内容的匿名层之前，因此文本将显示为紫色。

还要注意顺序。即使我们首先声明非分层样式，它仍然在层样式之后应用。

HTML

<div class="box">
  <p>Hello, world!</p>
</div>

CSS

p {
  color: rebeccapurple;
}

@layer type {
  .box p {
    font-weight: bold;
    font-size: 1.3em;
    color: green;
  }
}

结果

在下面的示例中，创建了两个没有应用任何规则的层，然后将 CSS 规则应用于这两个层。base层定义了color、border、font-size和padding。special层定义了不同的颜色。由于在定义层时special位于最后，因此使用它提供的颜色，文本使用rebeccapurple显示。base中的所有其他规则仍然适用。

HTML

<div class="item">
  I am displayed in <code>color: rebeccapurple</code> because the
  <code>special</code> layer comes after the <code>base</code> layer. My green
  border, font-size, and padding come from the <code>base</code> layer.
</div>

CSS

@layer base, special;

@layer special {
  .item {
    color: rebeccapurple;
  }
}

@layer base {
  .item {
    color: green;
    border: 5px solid green;
    font-size: 1.3em;
    padding: 0.5em;
  }
}

结果

• @import
• CSSLayerBlockRule
• CSSLayerStatementRule
• !important
• revert-layer
• 介绍 CSS 级联
• 层叠、特异性与继承
• 层叠层级
• CSS 的未来：级联层 在 bram.us 上 (2021)