父（范围）元素上的 HTML5 范围样式

Question

我正在阅读 HTML5 规范，对于 style 元素上的 scoped 属性，它指定：

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

由style 元素声明的样式表，该元素具有scoped 属性，并且其父节点是一个元素是作用域的，作用域元素是style 元素的父元素。

我正在尝试确定是否可以通过作用域样式表访问作用域元素，或者只是作用域元素的子树的子节点。

我从 MDN 复制了this example 并稍作修改：

<article>
    <div>The scoped attribute allows for you to include style elements mid-document. Inside rules only apply to the parent element.</div>
    <p>This text should be black. If it is red your browser does not support the scoped attribute.</p>
    <section>
        <style scoped>
            section {
                color: red;
            }
        </style>
        <p>This should be red.</p>
    </section>
    <section>
        <p>Another section here</p>
    </section>
</article>

当我在支持的浏览器（此时只有 Firefox）中运行示例时，文本 This should be red 仍然是红色的。但是，没有section 元素作为范围元素的子元素。此外，“此处的另一个部分”不是红色的，因此该样式仅适用于范围元素。

有人可以确认此行为是否符合规范或 Mozilla 实现中的错误？

Answer 1

HTML 5.0 specification 没有定义任何scoped 属性。但是HTML 5.1 specification 说：

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

在您的情况下，子树的根是包含 <style> 元素的 <section> 元素。根是树的一部分，样式 color:red; 应用于它。

所以，在这个例子中，Mozilla 的实现是符合标准的。