这篇翻译不完整。请帮忙从英语翻译这篇文章

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

:scope CSS伪类将会匹配作为选择符匹配元素的参考点(css的作用域或作用点)。在HTML中,可以使用<style>scoped属性来重新定义新的参考点。如果HTML中没有使用这个属性,那么默认的参考点(css的作用域或作用点)是<html>

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

Syntax

:scope

Example

<article>
  The element selected by :scope has a lime background if your browser supports scoped stylesheet.
  <section> 
    <p>Outside scope.</p>
  </section>
  <section>
    <style scoped>
      :scope { background-color: lime; }
    </style>
    <p>Inside scope.</p>
  </section>
  <section> 
    <p>Outside scope.</p>
  </section>
</article>

Live result

Specifications

Specification Status Comment
Selectors Level 4
:scope
Working Draft Initial definition

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (static profile - stylesheets) (Yes)[1] (Yes)[2] 未实现 15[1] 7.0[1]
In .querySelector/.querySelectorAll (Yes) 32 未实现 15[1] 7.0
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (static profile - stylesheets) ? (Yes)[2] 未实现 未实现 7.0
In .querySelector/.querySelectorAll ? 32 未实现 未实现 7.0

[1] Although Chrome and Safari register a match of the pseudo-class, and therefore apply the CSS rule, they does not yet support style scoping itself, with the consequence that the applied CSS rule floods beyond the intended portion of the document. It, thus, effectively and functionally equals to :root.

[2] Gecko 20 (Firefox 20) and later implement :scope pseudo-classes, but the preference layout.css.scope-pseudo.enabled must be set to true. It is only enabled by default in Nightly and Aurora test versions and since Gecko 32 (Firefox 32).

See also

文档标签和贡献者

 此页面的贡献者: zhaoqize
 最后编辑者: zhaoqize,