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说：

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

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

因此，在此示例中，Mozilla实现符合标准。

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

1 个答案: