CSS - @layer

CSS 的 at 规则`@layer`用于声明一个级联层，并且可以额外指定多个级联层参与时它们的优先级顺序。

layer-name - 级联层的名称。
rules - 级联层中的 CSS 规则集。

描述

级联层中的样式会被合并，这为 Web 开发人员提供了对级联的更多控制。
未分配到层的样式会分组到一个单一的匿名层中，该层排在所有命名层和未命名层之后。
因此，无论特异性如何，在层外部定义的样式都优先于层内部的样式。

可以使用三种不同的方式利用`@layer`at 规则创建级联层。

第一种方法是创建一个具有特定名称的级联层，其中包含相应的 CSS 规则。
```
@layer layer-name {rules}      
```
另一种方法是创建命名级联层而无需指定任何样式。可以同时定义多个层。层声明的顺序决定优先级；如果多个层中的规则冲突，则最后声明的层优先。
```
@layer layer-name;
@layer layer-name, layer-name, layer-name;    
```
第三种方法是创建级联层而无需指定名称。这会创建一个匿名级联层，其功能与命名层类似。匿名层的优先级基于其声明顺序。
```
@layer {rules}    
```
也可以使用`@import` at 规则创建级联层，并将规则放在导入的样式表中。下面是一个例子。
```
@import "demo-layer.css" layer(layout);
```

嵌套层

层可以嵌套，这意味着可以在其他层中创建层。这对于组织 CSS 和赋予某些层优先级非常有用。

@layer layer-name1 {
   @layer layer-name2 {
} }

语法

正式的 @layer 语法如下所示

@layer <layer-name>? { <stylesheet> } | @layer <layer-name># ;

示例

下面的例子演示了在层外部声明的样式优先于在层内声明的样式。

<html>
<head>
<style>
   h1 {
      color: white;
      background-color:gray;
   }
   p {
      color: black;
   }
   @layer components {
      .container h1  {
         background-color: blue;
         color: red;
         padding: 10px;
         border-radius: 20px;
      }
      .container p {
      color: white;
      background-color: lightblue;
      font-size: 25px;
      }
   }
</style>
</head>
<body>
   <div class="container">
      <h1>HTML example to show CSS at-rules @layer</h1>
      <p>This is a sample text.</p>
      <button>Click Me</button>
   </div>
</body>
</html>

将规则分配给现有层

以下示例演示了将规则分配给现有层。最初创建两个没有任何规则的层，之后将 CSS 规则应用于这两个层。

在给出的示例中，`@layer primary-demo, custom-demo;`声明了两个名为`primary-demo`和`custom-demo`的 CSS 层。
在`@layer primary-demo`中定义的样式将默认格式应用于具有`container`类的元素。
随后的部分`@layer custom-demo`覆盖了同一类的某些属性，允许自定义样式而不影响基础层，这演示了使用 CSS 层来组织和管理样式。

<html>
<head>
<style>
   @layer primary-demo, custom-demo;
   @layer primary-demo {
      .container {
      background-color: blue;
      color: black;
      font-family: Arial, sans-serif;
      font-size: 20px;
      line-height: 1.5;
      }	
   }
   @layer custom-demo {
      .container {
      background-color: orange;
      color: white;
      padding: 10px;
      text-align: center;
      }
   }
</style>
</head>
<body>
   <div class="container">
      <h1>Welcome to My Website</h1>
      <p>This is a welcome quote with a blue background and white text.</p>
      <p><a href="#">Learn More</a></p>
      <h2>About Me</h2>
      <p>I am a web developer with experience in HTML, CSS, and JavaScript.</p>
      <p><a href="#">View My Portfolio</a></p>
   </div>
</body>
</html>

打印页面