:scope
:scope
属于 CSS 伪类,它表示作为选择器要匹配的参考点的元素。
css
/* Selects a scoped element */
:scope {
background-color: lime;
}
当前,在样式表中使用时,:scope
等效于 :root
,因为目前尚无一种方法来显式建立作用域元素。当从 DOM API 使用,如(querySelector()
, querySelectorAll()
, matches()
, 或 Element.closest()
), :scope
匹配你调用 API 的元素。
用法
Error: could not find syntax for this item
示例
Identity match
在这个简单的示例中,我们演示了调用 Element.matches()
方法中使用 :scope
伪类来匹配调用它的元素。
JavaScript
js
let paragraph = document.getElementById("para");
let output = document.getElementById("output");
if (paragraph.matches(":scope")) {
output.innerText = "Yep, the element is its own scope as expected!";
}
HTML
html
<p id="para">
This is a paragraph. It is not an interesting paragraph. Sorry about that.
</p>
<p id="output"></p>
结果
Direct children
当需要获取已检索到的的直接后代元素时,:scope
伪类很有用。
JavaScript
js
var context = document.getElementById("context");
var selected = context.querySelectorAll(":scope > div");
document.getElementById("results").innerHTML = Array.prototype.map
.call(selected, function (element) {
return "#" + element.getAttribute("id");
})
.join(", ");
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 elements ids :
<span id="results"></span>
</p>
结果
规范
Specification |
---|
Selectors Level 4 # the-scope-pseudo |
浏览器兼容性
BCD tables only load in the browser