CSS @layer 用于声明级联层，当涉及多个级联层时，还可以指定优先级顺序。
layer-name - 这是级联层的名称。
rules - 级联层中的 CSS 规则集。
描述
级联层内的规则相结合，为 Web 开发人员提供了对级联更好的控制。
未分配给图层的样式将被分组到单个匿名图层中，该图层在所有命名和未命名图层之后排序。
因此，在图层外部定义的样式优先于那些样式。在层内部，无论具体性如何。
@layer at-rule 用于使用三种不同的方式创建级联层。
第一种方法是创建一个具有特定名称的级联层，其中包含相应的 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 -演示；声明两个 CSS 层，名称分别为primary-demo 和custom-demo。
@layer Primary-demo 中定义的样式将默认格式应用于具有类容器的元素。
后续部分@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>