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 (作用域限制) {
  规则集
}

浏览器支持

表格中的数字表示首个完全支持该 @ 规则的浏览器版本。