:scope
:scope
CSS 伪类 代表作为选择器匹配参考点或范围的元素。
css
/* Selects a scoped element */
: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 contains lots of information about
<a href="/en-US/docs/Web/HTML">HTML</a>,
<a href="/en-US/docs/Web/CSS">CSS</a>, and
<a href="/en-US/docs/Web/JavaScript">JavaScript</a>.
</p>
</div>
<div class="dark-scheme">
<p>
MDN contains lots of information about
<a href="/en-US/docs/Web/HTML">HTML</a>,
<a href="/en-US/docs/Web/CSS">CSS</a>, and
<a href="/en-US/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>
Selected element ids :
<span id="results"></span>
</p>
JavaScript
js
const context = document.getElementById("context");
const selected = context.querySelectorAll(":scope > div");
document.getElementById("results").textContent = Array.prototype.map
.call(selected, (element) => `#${element.getAttribute("id")}`)
.join(", ");
结果
context
的范围是 id
为 context
的元素。所选元素是该上下文的直接子元素(element-1
和 element-2
)的 <div>
元素,但不是其后代。
规范
规范 |
---|
选择器级别 4 # the-scope-pseudo |
浏览器兼容性
BCD 表格仅在浏览器中加载