CSS @scope 規則

定義和用法

CSS @scope 規則允許您選擇特定 DOM 子樹中的元素。

通過此 @ 規則,您可以精確地定位元素,而無需編寫過于具體的選擇器。

此 @ 規則還減少了選擇器與 DOM 結構之間的耦合。

實例

例子 1

在這里,我們使用兩個獨立的 @scope 塊來匹配 .ex1 類和 .ex2 類中的 <a> 元素。:scope 用于選擇和設置作用域根本身的樣式。在此示例中,作用域根是應用了類的 <div> 元素:

@scope (.ex1) {
  :scope {
    background-color: salmon;
    padding: 10px;
  }
  a {
    color: maroon;
  }
  a:hover {
    color: blue;
  }
}
@scope (.ex2) {
  :scope {
    background-color: beige;
    padding: 10px;
  }
  a {
    color: green;
  }
}

親自試一試

查看以下 HTML:

<div class="container">
  <div class="news">
    <h2>Some header</h2>
    <img src="example.jpg" alt="Some image">
  </div>
</div>

這里有一些嵌套的 <div> 元素,如果我們想為上述 container/news 部分中的 <h2> 和 <img> 元素設置樣式,則必須編寫以下內容(不使用 @scope):

例子 2

.container .news h2 {
  color: green;
}
.container .news img {
  border: 2px solid maroon;
}

親自試一試

使用 @scope 規則,您可以精確地定位元素,而無需編寫過于復雜的選擇器,如下所示:

例子 3

在這里,我們僅針對 .container 組件中的 <h2> 和 <img> 元素,將 .container 設置為 @scope 規則的根作用域:

@scope (.container) {
  h2 {
    font-size: 30px;
    color: green;
  }
  img {
    border: 5px solid maroon;
  }
}

親自試一試

@scope 規則包含一個或多個規則集,可以通過兩種方式使用:

  • 作為 CSS 中的獨立塊,在這種情況下,它包含一個前導部分,其中包括作用域根和可選的作用域限制選擇器——這些定義了作用域的上下邊界。
  • 作為 HTML 中 <style> 元素內的行內樣式,在這種情況下,前導部分被省略,并且包含的規則集會自動作用到 <style> 元素的父元素。

例子 4

“甜甜圈作用域”僅針對位于祖先樹中兩個元素之間的元素。這是例子:

@scope (.container) to (.news) {
  h2 {
    font-size: 30px;
    color: green;
  }
  img {
    border: 5px solid maroon;
  }
}

親自試一試

CSS 語法

@scope (作用域根) {
  規則集
}

或者

/* 甜甜圈作用域 */
@scope (作用域根) to (作用域限制) {
  規則集
}

瀏覽器支持

表格中的數字表示首個完全支持該 @ 規則的瀏覽器版本。

Chrome Edge Firefox Safari Opera
118 118 不支持 17.4 104