1. 首页
  2. 问题
  3. HTML5中样式元素的“作用域”属性的当前状态是什么？
一尘不染

HTML5中样式元素的“作用域”属性的当前状态是什么？

css

允许的父元素

可以包含元数据元素，div，noscript，section，article和aside的任何元素

在<style>任何地方（<div>允许的地方）都允许或多或少地允许这样做

可以使用此元素的上下文：（注释：样式）

If the scoped attribute is absent: where metadata content is expected.
If the scoped attribute is absent: in a noscript element that is a child

of a head element.
If the scoped attribute is present: where flow content is expected, but
before any other flow content other than inter-element whitespace, and not
as the child of an element whose content model is transparent.

以及本文档后面的内容：

作用域属性是一个布尔属性。如果存在，则表示样式仅适用于以样式元素的父元素为根的子树，而不是整个Document。

如果存在范围属性，并且元素具有父元素，则样式元素必须是其父元素中流内容的第一个节点，而不是元素间空格，并且父元素的内容模型必须不具有透明组件。

看起来像有（或将有）“两个不同的<style>元素”：

  • <style> -全球-~~仅在 <head>
  • <"scopestyle"> -仅（！）具有布尔范围attr，~~仅在开始时 <div>

（请读成“或多或少”之类的“ ~~”）

但是后面的链接已有2年以上的历史了，所有浏览器（我测试过Chrome，FF，IE，Opera）都将流入解释<style>为好像在标题中一样。（并忽略AFAIK范围-
是-仍然没有标准）

所以我的三部分问题

  1. 我对W3C文档（两种样式-逻辑）的解释正确吗？

  2. 现在的状态是什么-2015年？

  3. 而且，可能有人在外面，谁知道即将发生的事情？


阅读 299

收藏
2020-05-16

共1个答案

一尘不染

您对规范的解释似乎正确。在[风格上的标签页MDN包含的描述scoped属性。

scoped 如果存在此属性，则样式仅适用于其父元素。如果不存在，则样式适用于整个文档。

该scope属性：

这是一个有效的示例，仅在Firefox 21至54中有效。

例：

<div>

  <p>Out of scope.</p>

  <div>

    <style scoped>

      p {

        background: green;

      }

    </style>

    <p>In scope (green background).</p>

  </div>

  <p>Out of scope.</p>

</div>

在不支持该scoped属性的浏览器中，这些样式将全局应用。

该:scope伪选择：

除了作用域属性，还存在的的:scope伪选择可以使用的。此实现提供与以前相同的支持。

例：

<div>

  <p>Outside scope.</p>

  <div>

    <style scoped>

      :scope p {

        background: green;

      }

    </style>

    <p>In scope (green background).</p>

  </div>

  <p>Outside scope.</p>

</div>

此选项还增加了可能的优点，即如果浏览器不了解该scoped属性，则样式将不会全局应用。唯一的问题是:scope，即使scoped不支持该属性，Safari
7+也会识别伪选择器，因此在Safari 7+中失去了优势。

整体风格：

和以前一样，使用style不带scoped属性的标签将创建全局样式，因此只有在包含scoped属性的情况下，它才是作用域。

2020-05-16