CSS - @layer

CSS @layer 用于声明级联层，并且可以在涉及多个级联层时额外指定优先级顺序。

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

描述

级联层中的规则组合在一起，使 Web 开发人员能够更好地控制级联。
未指定给图层的样式将分组到一个匿名图层中，该图层在所有命名和未命名图层之后排序。
因此，无论具体性如何，在图层外部定义的样式都优先于图层内部的样式。

@layer 用于通过三种不同的方式创建级联层。

第一种方法是创建一个具有特定名称的级联层，其中包含相应的 CSS 规则。


 @layer layer-name {rules}

另一种方法是在不指定任何样式的情况下创建命名的 cascade 图层。可以同时定义多个图层。图层声明的顺序决定了优先级;如果多个层中存在冲突的规则，则列出的最后一个层优先。


@layer layer-name;
@layer layer-name, layer-name, layer-name;

第三种方法是在不指定名称的情况下创建级联图层。将建立一个匿名级联层，其功能类似于命名层。匿名层的优先级基于其声明顺序。


 @layer {rules}

还可以使用 @import at-rule 创建级联层，将规则放在导入的样式表中。下面是一个示例。


 @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>

打印本页