級聯層-css教學-PHP中文網

級聯層

Joseph Gordon-Levitt

發布： 2025-03-19 10:22:16

原創

823 人瀏覽過

CSS的新成員：@layer

CSS領域出現了一項新特性： @layer 。這要歸功於Miriam Suzanne，她對影響CSS發展起到了關鍵作用。我之前聽說過這個特性，但它突然出現在了實驗性瀏覽器中。

Bramus撰寫了一篇精彩的文章，深入探討了這一特性：

@layer的出現為我們開發者提供了更多控制層疊樣式表(Cascade) 的工具。 @layer的真正強大之處在於它在層疊樣式表中的獨特位置：位於選擇器特異性(Selector Specificity) 和出現順序之前。正因如此，我們無需擔心其他層中使用的CSS 的選擇器特異性，也不必擔心將CSS 加載到這些層的順序——這對於大型團隊或加載第三方CSS 時非常有用。

Bramus Van Damme , “CSS 的未來：層疊層(CSS@layer)*“

（加粗部分為原文強調）

關鍵在於：這是一個影響選擇器優先級的新特性。這需要我們重新調整對CSS的理解，因為@layer是決定實際應用樣式的全新（且強大的）機制。

我說它強大，是因為“更高層”的樣式可以戰勝傳統上更強的選擇器，即使該層中的選擇器本身較弱。

 /* 第一層*/
@layer base-layer {
  body#foo {
    background: tan;
  }
}
/* 更高層，因此勝出，即使選擇器較弱*/
@layer theme-layer {
  body.foo {
    background: #eee;
  }
}

/* 注意！未分層的樣式比分層樣式更強大，即使選擇器較弱*/
body {
  background: red;
}

登入後複製

因為底部這段CSS根本沒有放在任何層中，所以它勝出，即使選擇器較弱。

而且，你並不局限於一層。你可以隨意定義和使用它們。

 @layer reset; /* 創建名為“reset”的第一層*/
@layer base; /* 創建名為“base”的第二層*/
@layer theme; /* 創建名為“theme”的第三層*/
@layer utilities; /* 創建名為“utilities”的第四層*/
/* 或者，@layer reset, base, theme, utilities; */


@layer reset { /* 追加到名為“reset”的層*/
  /* ... */
}

@layer theme { /* 追加到名為“theme”的層*/
  /* ... */
}

@layer base { /* 追加到名為“base”的層*/
  /* ... */
}

@layer theme { /* 追加到名為“theme”的層*/
  /* ... */
}

登入後複製

這真是令人震驚。