:scope

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

:scope CSS 伪类表示作为选择器要匹配的作为参考点或作用域的元素。

css
/* 选择一个限制作用域的元素 */
:scope {
  background-color: lime;
}

:scope 匹配的元素取决于它的使用上下文：

  • 当在样式表的根级别使用时，:scope 等效于 :root——在常规 HTML 文档中匹配 <html> 元素。
  • 当在 @scope 块中使用时，:scope 匹配块所定义的作用域的根。它提供了一种从 @scope 块内部应用样式到作用域的根的方法。
  • 当在 DOM API 调用（例如 querySelector()、querySelectorAll()、matches() 或 Element.closest()）中使用时，:scope 匹配调用此类方法的元素。

语法

css
:scope {
  /* ... */
}

示例

使用 :scope 来代替 :root

此示例展示了当在样式表的根级别使用时，:scope 等效于 :root。在当前示例中，提供的 CSS 会将 <html> 元素的背景颜色设置为橙色。

HTML

html
<html></html>

CSS

css
:scope {
  background-color: orange;
}

结果

使用 :scope 来为 @scope 块的作用域的根元素设置样式

在此示例中，我们使用两个单独的 @scope 块来匹配 .light-scheme 和 .dark-scheme 类中的链接。请注意，:scope 用于选择作用域的根元素并为其设置样式。在此示例中，作用域的根是应用了这些类的 <div> 元素。

HTML

html
<div class="light-scheme">
  <p>
    MDN 涵盖了很多有关
    <a href="/zh-CN/docs/Web/HTML">HTML</a>、<a href="/zh-CN/docs/Web/CSS"
      >CSS</a
    >
    和
    <a href="/zh-CN/docs/Web/JavaScript">JavaScript</a> 的信息。
  </p>
</div>

<div class="dark-scheme">
  <p>
    MDN 涵盖了很多有关
    <a href="/zh-CN/docs/Web/HTML">HTML</a>、<a href="/zh-CN/docs/Web/CSS"
      >CSS</a
    >
    和
    <a href="/zh-CN/docs/Web/JavaScript">JavaScript</a> 的信息。
  </p>
</div>

CSS

css
@scope (.light-scheme) {
  :scope {
    background-color: plum;
  }

  a {
    color: darkmagenta;
  }
}

@scope (.dark-scheme) {
  :scope {
    background-color: darkmagenta;
    color: antiquewhite;
  }

  a {
    color: plum;
  }
}

结果

在 JavaScript 中使用 :scope

此示例演示了如何在 JavaScript 中使用 :scope 伪类。如果你需要获取已获取的 Element 的直接后代，这可能会很有用。

HTML

html
<div id="context">
  <div id="element-1">
    <div id="element-1.1"></div>
    <div id="element-1.2"></div>
  </div>
  <div id="element-2">
    <div id="element-2.1"></div>
  </div>
</div>
<p>选择的元素 id：<span id="results"></span></p>

JavaScript

js
const context = document.getElementById("context");
const selected = context.querySelectorAll(":scope > div");

document.getElementById("results").innerHTML = Array.prototype.map
  .call(selected, (element) => `#${element.getAttribute("id")}`)
  .join("、");

结果

context 的作用域是 id 为 context 的元素。所选元素是此上下文的直接子元素——element-1 和 element-2——但不包括它们的后代。

规范

Specification
Selectors Level 4
# the-scope-pseudo

浏览器兼容性

参见