:scope
:scope
属于 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
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
<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
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
<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