:scope

:scope 属于 CSS 伪类,它表示作为选择器要匹配的参考点的元素。

/* Selects a scoped element */
:scope {
  background-color: lime;
}

当前,在样式表中使用时, :scope 等效于 :root,因为目前尚无一种方法来显式建立作用域元素。当从DOM API使用,如(querySelector(), querySelectorAll(), matches(), 或 Element.closest()), :scope 匹配你调用API的元素。

用法

:scope

示例

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>

结果

规范

规范 状态 备注
Selectors Level 4
:scope
Working Draft Initial definition.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
:scopeChrome Full support 27Edge Full support 79Firefox Full support 32
Notes
Full support 32
Notes
Notes Firefox 55 removes support for <style scoped> but not for the :scope pseudo-class, which is still supported. <style scoped> made it possible to explicitly set up element scopes, but ongoing discussions about the design of this feature as well as lack of other implementations resulted in the decision to remove it.
No support 20 — 32
Disabled
Disabled From version 20 until version 32 (exclusive): this feature is behind the layout.css.scope-pseudo.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 15Safari Full support 7WebView Android Full support ≤37Chrome Android Full support 27Firefox Android Full support 32
Notes
Full support 32
Notes
Notes Firefox 55 removes support for <style scoped> but not for the :scope pseudo-class, which is still supported. <style scoped> made it possible to explicitly set up element scopes, but ongoing discussions about the design of this feature as well as lack of other implementations resulted in the decision to remove it.
Full support 20
Disabled
Disabled From version 20: this feature is behind the layout.css.scope-pseudo.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 15Safari iOS Full support 7Samsung Internet Android Full support 1.5
Support in DOM API such as in querySelector() and querySelectorAll()Chrome Full support 27Edge Full support 79Firefox Full support 32IE No support NoOpera Full support 15Safari Full support 7WebView Android Full support ≤37Chrome Android Full support 27Firefox Android Full support 32Opera Android Full support 15Safari iOS Full support 7Samsung Internet Android Full support 1.5

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

参考