它在此处说明http://www.w3.org/TR/html-markup/style.html#style：
允许的父元素
任何可以包含元数据元素的元素div，noscript， 部分，文章，放在一边
<style>或多或少允许每个地方（允许<div>）
但是，另一方面，我在http://www.w3.org/TR/2012/WD-html5-20121025/the-style-element.html#attr-style-scoped
可以使用此元素的上下文:(注释：样式）
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.
以及本文后面的内容：
scoped属性是一个布尔属性。如果存在，则表示 这些样式仅适用于以该样式为根的子树 元素的父元素，而不是整个文档。
如果scoped属性存在且元素具有父元素 element，那么style元素必须是流内容的第一个节点 在其元素空格以外的父元素中 父元素的内容模型必须没有透明组件。
这类似于（或将会）＆＃34;两个不同的<style>元素＆＃34;：a
<style> - global - ~~仅在<head> <"scopestyle"> - 仅限（！）使用bool范围attr和~~仅在<div> （请阅读＆＃34; ~~＆＃34;喜欢＆＃34;或多或少＆＃34;）
但后来的链接已超过2年了，所有浏览器（我测试过Chrome，FF，IE，Opera）都会将流入<style>解释为标题。 （忽略AFAIK的范围 - 是 - 仍然没有标准）
所以我的三部分问题
我对W3C文件（2种风格 - 逻辑）的解释是否正确？
现在的状态是什么 - 2015年？
并且，可能有人在那里，谁知道即将到来的什么？
答案 0 :(得分：17)
您对规范的解释似乎是正确的。 MDN page on the style tag包含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伪选择器：除了scoped属性外，还可以使用the :scope pseudo-selector。此实现提供与前一个相同的支持。
<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属性，则不会全局应用样式。唯一的问题是Safari 7+会识别:scope伪选择器，即使不支持scoped属性，因此在Safari 7 +中会失去优势。
与以前一样，使用不带style属性的scoped标记会创建全局样式，因此只有在包含scoped属性时才会设置范围。
此时，对该功能的支持看起来很黯淡。仅在Firefox 21到54中支持CSS范围。目前在任何主要浏览器，Firefox，Chrome，Internet Explorer，Safari或Opera中都不支持CSS范围。 According to caniuse.com，从Chrome 20到36，可以使用实验标记启用支持，但support was removed。
答案 1 :(得分：8)
看来＆＃34;范围＆＃34;属性已从HTML5规范中完全删除。目前和之前的几个版本都没有提到它。
答案 2 :(得分：8)
这里的许多答案已经过时了，所以这里简要总结一下scoped属性的发生情况。
最初（在HTML5之前），<style>不是＆＃34;有效＆＃34;在<head>之外，但大多数或所有浏览器都支持。 ＆＃34;无效＆＃34;意味着验证者会抱怨它，并且规范（W3C的HTML 4和XHTML 1系列）表示不应该这样做。但它奏效了。有时这很糟糕：无论<style>元素出现在文档中的哪个位置，其规则都适用于整个文档（当然，基于所使用的选择器）。这可能会导致作者写一个＆＃34; local＆＃34;样式表意味着仅适用于文档的某个区域，但可能会意外地重新放置其他区域。
HTML5的scoped属性提案旨在解决此问题：它会告诉浏览器该表中的样式仅适用于<style>的父元素和它的后代。此外，在某些时候<style scoped>也需要成为其父级的第一个孩子，这使得任何阅读HTML代码的人都非常清楚该范围是什么。不具有该属性的style元素仅在<head>元素内有效。
时间流逝，并没有足够的供应商实施新功能（Firefox和Chrome包含一些实验性支持），因此它最终被删除。浏览器行为仍然与HTML 5之前一样，但当前规范至少记录了它：<style>现在在整个文档中是合法/有效的，但规范警告潜在的副作用（重新安排元素意外）。 / p>
根据当前的规范和浏览器行为，最好和最安全的方式来实现＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;样式是在ID的帮助下明确地做到的，如本片段所示：
<div id="myDiv">
<style>
#myDiv p { margin: 1em 0; }
#myDiv em { color: #900; }
#myDiv whatever { /* ... */ }
</style>
<p>Some content here... </p>
</div>
div具有id属性，样式表中的所有规则都明确使用了id选择器，以确保它们仅适用于该div。当然，这仍然需要避免文档中的id冲突，但唯一性已经是id属性的要求。
虽然删除了scoped属性，但这种方法可以完成工作，具有合理的可读性（当然，就像任何代码一样，它可能会被混淆，但这不是重点），应该验证，并且应该适用于几乎所有与CSS兼容的浏览器。
PS：根据规范，<style>中的<body>应该验证。然而，Nu验证器（标记为实验性）仍然抱怨它。有一个未解决的问题：https://github.com/validator/validator/issues/489
答案 3 :(得分：1)
截至2016年5月，<style scoped>已从specification中删除{/ 1}}。
答案 4 :(得分：0)
HTML5的主要目标是正式指定浏览器基本实现的行为＆＃34;永远＆＃34;不管以前的HTML规范。您始终可以在HTML文档中的任何位置使用<style>标记，因此使用HTML5您仍然可以。这不会改变。
有关详细信息，请参阅<style>元素上当前HTML5规范部分的链接：
http://www.w3.org/html/wg/drafts/html/master/document-metadata.html#the-style-element
答案 5 :(得分：0)
从2020年开始更新
在当前的 VueJs单个文件组件中，有一个带有“作用域”属性的样式部分，可在“编译”时动态转换CSS类，因此它们仅限于该范围组件。
How to correctly use "scoped" styles in VueJS single file components?
就个人而言，我喜欢这种方法，因为集中式CSS趋于陈旧和脆弱。新开发人员通常只是向项目添加新类，因为他们不想破坏现有设计。清理旧CSS似乎从未在任何人的工作清单上出现。