: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 |