8

我正在阅读 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 实现中的错误？

4

1 回答 1

2

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

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

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

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

于 2014-06-29T22:26:14.270 回答