父(范围)元素上的HTML5范围样式

Question

我正在阅读HTML5规范和元素的scoped属性style,它指定:

该scoped属性是布尔属性.如果存在,则表示样式仅适用于以style元素的父元素为根的子树,而不是整体Document.

由style具有scoped属性且具有作为元素的父节点的元素声明的样式表是作用域的,其中作用域元素是style元素的父元素.

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

我从MDN 复制了这个例子并修改了一下:

<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 规范没有定义任何scoped属性。但HTML 5.1 规范说：

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

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

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