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>

列印頁面