HTML5 中样式元素的 "scoped" 属性的当前状态是什么？
What is the current state of the "scoped" attribute for the style element in HTML5?
这里写着http://www.w3.org/TR/html-markup/style.html#style:
Permitted parent elements
any element that can contain metadata elements, div, noscript,
section, article, aside
每个地方或多或少都允许 <style>（允许 <div>）
但是，另一方面，我在这里找到了更详细的信息 http://www.w3.org/TR/2012/WD-html5-20121025/the-style-element.html#attr-style-scoped
Contexts in which this element can be used: (annotation: style)
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.
以及本文档后面的内容：
The scoped attribute is a boolean attribute. If present, it indicates
that the styles are intended just for the subtree rooted at the style
element's parent element, as opposed to the whole Document.
If the scoped attribute is present and the element has a parent
element, then the style element must be the first node of flow content
in its parent element other than inter-element whitespace, and the
parent element's content model must not have a transparent component.
这看起来像是有（或将会有）"two different <style> elements"：一个
<style> - 全球 - ~~仅限 <head> <"scopestyle"> - 仅（！）具有 bool 作用域属性并且 ~~ 仅在 <div>
（请阅读“~~”喜欢"more or less"）
但是后面的link已经2年多了，所有的浏览器（我测试过Chrome，FF，IE，Opera）都把流入的<style>解释成是在 header。 （并忽略 AFAIK 范围 - 是的 - 仍然没有标准）
所以我的问题由 3 部分组成
我对 W3C 文档（两种样式 - 逻辑）的解释是否正确？
现在是什么状态 - 2015 年？
并且，是否可能有人知道 horizon 即将到来？
HTML5 的主要目标是正式指定浏览器基本上 "forever" 已经实现的行为，而不考虑以前的 HTML 规范。您始终可以在 HTML 文档中的任何位置使用 <style> 标签，因此使用 HTML5 您仍然可以。这不会改变。
有关详细信息，请参阅 <style> 元素上当前 HTML5 规范部分的 link：
http://www.w3.org/html/wg/drafts/html/master/document-metadata.html#the-style-element
更新。 scoped 属性不再适用于任何浏览器，现在 非标准 和 弃用 .
您对规范的解释似乎是正确的。 MDN page on the style tag 包含 scoped 属性的描述。
scoped If this attribute is present, then the style applies only to its parent element. If absent, the style applies to the whole document.
scoped属性：
这是一个仅适用于 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+ 失去了优势。
全局样式：
和以前一样，使用不带 scoped 属性的 style 标签将创建全局样式，因此只有在包含 scoped 属性时才会限定范围。
兼容性摘要：
此时，对该功能的支持看起来很惨淡（更新 2022：该功能的提案已完全从标准中删除）。 CSS 范围仅在 Firefox 21 到 54 中受支持。目前在任何主要浏览器、Firefox、Chrome、Internet Explorer、Safari 或 Opera 中均不支持。 According to caniuse.com, from Chrome 20 to 36 it was possible to enable support with the experimental flag, but support was removed.
"scoped" 属性似乎已从 HTML5 规范中完全删除。现在和以前的几个版本都没有提到它。
此处的许多答案已经有些过时，因此这里简要总结一下 scoped 属性发生的情况。
最初（在 HTML5 之前），<style> 不在 <head> 之外 "valid"，但大多数或所有浏览器都支持。 "not valid" 意味着验证者会抱怨它，规范（W3C 的 HTML 4 和 XHTML 1 系列）说不应该这样做。但它奏效了。有时这很糟糕：无论 <style> 元素出现在文档中的什么位置，它的规则都会应用于整个文档（当然，基于所使用的选择器）。这可能会导致作者编写 "local" 样式 sheet 旨在仅在文档的某个区域内应用，但可能会意外地重新设置其他区域的样式。
HTML5 的 scoped 属性提议旨在解决这个问题：它会告诉浏览器 sheet 中的样式仅适用于 <style>的父元素及其后代。此外，在某些时候 <style scoped> 也被要求成为其父级的第一个子级，这使得任何阅读 HTML 代码的人都非常清楚范围是什么。不带属性的 style 元素仅在 <head> 元素内有效。
时间过去了，没有足够的供应商实施新功能（Firefox 和 Chrome 包括一些实验性支持），因此它最终被放弃了。浏览器行为与 HTML 5 之前一样，但当前规范至少记录了它：<style> 现在在整个文档中是 legal/valid，但规范警告潜在的副作用（不小心重新设计元素）。
根据当前的规范和浏览器行为，实现“'scoped'”样式的最佳和最安全的方法是在 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 属性，样式中的所有规则sheet 明确使用 id 选择器以确保它们仅适用于 div。当然，这仍然需要避免跨文档的 id 冲突，但是唯一性已经是 id 属性的要求。
虽然删除了 scoped 属性，但这种方法可以完成工作，具有合理的可读性（当然，就像任何代码一样，它可能会被混淆，但这不是重点），应该验证，并且应该可以在几乎每个 CSS 兼容的浏览器上工作。
PS：根据规范，<body> 内的 <style> 应该有效。然而，Nu 验证器（标记为实验性的）仍然抱怨它。有一个关于此的未决问题：https://github.com/validator/validator/issues/489
截至 2016 年 5 月，<style scoped> 已从 whatwg specification.
中删除
2020 年更新
在当前的VueJs单文件组件中，有一个带有"scoped"属性的样式部分动态转换CSS 类 "compile" 时间，以便它们仅限于该组件的范围。
How to correctly use "scoped" styles in VueJS single file components?
就个人而言，我喜欢这种集中式方法 CSS 往往会变得陈旧和脆弱。新开发人员通常只是向项目添加新 类，因为他们不想破坏现有设计。清理旧的 CSS 似乎从来没有出现在任何人的待办事项列表上...
这里写着http://www.w3.org/TR/html-markup/style.html#style:
Permitted parent elements
any element that can contain metadata elements, div, noscript, section, article, aside
每个地方或多或少都允许 <style>（允许 <div>）
但是，另一方面，我在这里找到了更详细的信息 http://www.w3.org/TR/2012/WD-html5-20121025/the-style-element.html#attr-style-scoped
Contexts in which this element can be used: (annotation: style)
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.
以及本文档后面的内容：
The scoped attribute is a boolean attribute. If present, it indicates that the styles are intended just for the subtree rooted at the style element's parent element, as opposed to the whole Document.
If the scoped attribute is present and the element has a parent element, then the style element must be the first node of flow content in its parent element other than inter-element whitespace, and the parent element's content model must not have a transparent component.
这看起来像是有（或将会有）"two different <style> elements"：一个
<style>- 全球 - ~~仅限<head><"scopestyle">- 仅（！）具有 bool 作用域属性并且 ~~ 仅在<div> 的开头
（请阅读“~~”喜欢"more or less"）
但是后面的link已经2年多了，所有的浏览器（我测试过Chrome，FF，IE，Opera）都把流入的<style>解释成是在 header。 （并忽略 AFAIK 范围 - 是的 - 仍然没有标准）
所以我的问题由 3 部分组成
我对 W3C 文档（两种样式 - 逻辑）的解释是否正确？
现在是什么状态 - 2015 年？
并且，是否可能有人知道 horizon 即将到来？
HTML5 的主要目标是正式指定浏览器基本上 "forever" 已经实现的行为，而不考虑以前的 HTML 规范。您始终可以在 HTML 文档中的任何位置使用 <style> 标签，因此使用 HTML5 您仍然可以。这不会改变。
有关详细信息，请参阅 <style> 元素上当前 HTML5 规范部分的 link：
http://www.w3.org/html/wg/drafts/html/master/document-metadata.html#the-style-element
更新。 scoped 属性不再适用于任何浏览器，现在 非标准 和 弃用 .
您对规范的解释似乎是正确的。 MDN page on the style tag 包含 scoped 属性的描述。
scoped If this attribute is present, then the style applies only to its parent element. If absent, the style applies to the whole document.
scoped属性：
这是一个仅适用于 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+ 失去了优势。
全局样式：
和以前一样，使用不带 scoped 属性的 style 标签将创建全局样式，因此只有在包含 scoped 属性时才会限定范围。
兼容性摘要：
此时，对该功能的支持看起来很惨淡（更新 2022：该功能的提案已完全从标准中删除）。 CSS 范围仅在 Firefox 21 到 54 中受支持。目前在任何主要浏览器、Firefox、Chrome、Internet Explorer、Safari 或 Opera 中均不支持。 According to caniuse.com, from Chrome 20 to 36 it was possible to enable support with the experimental flag, but support was removed.
"scoped" 属性似乎已从 HTML5 规范中完全删除。现在和以前的几个版本都没有提到它。
此处的许多答案已经有些过时，因此这里简要总结一下 scoped 属性发生的情况。
最初（在 HTML5 之前），<style> 不在 <head> 之外 "valid"，但大多数或所有浏览器都支持。 "not valid" 意味着验证者会抱怨它，规范（W3C 的 HTML 4 和 XHTML 1 系列）说不应该这样做。但它奏效了。有时这很糟糕：无论 <style> 元素出现在文档中的什么位置，它的规则都会应用于整个文档（当然，基于所使用的选择器）。这可能会导致作者编写 "local" 样式 sheet 旨在仅在文档的某个区域内应用，但可能会意外地重新设置其他区域的样式。
HTML5 的 scoped 属性提议旨在解决这个问题：它会告诉浏览器 sheet 中的样式仅适用于 <style>的父元素及其后代。此外，在某些时候 <style scoped> 也被要求成为其父级的第一个子级，这使得任何阅读 HTML 代码的人都非常清楚范围是什么。不带属性的 style 元素仅在 <head> 元素内有效。
时间过去了，没有足够的供应商实施新功能（Firefox 和 Chrome 包括一些实验性支持），因此它最终被放弃了。浏览器行为与 HTML 5 之前一样，但当前规范至少记录了它：<style> 现在在整个文档中是 legal/valid，但规范警告潜在的副作用（不小心重新设计元素）。
根据当前的规范和浏览器行为，实现“'scoped'”样式的最佳和最安全的方法是在 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 属性，样式中的所有规则sheet 明确使用 id 选择器以确保它们仅适用于 div。当然，这仍然需要避免跨文档的 id 冲突，但是唯一性已经是 id 属性的要求。
虽然删除了 scoped 属性，但这种方法可以完成工作，具有合理的可读性（当然，就像任何代码一样，它可能会被混淆，但这不是重点），应该验证，并且应该可以在几乎每个 CSS 兼容的浏览器上工作。
PS：根据规范，<body> 内的 <style> 应该有效。然而，Nu 验证器（标记为实验性的）仍然抱怨它。有一个关于此的未决问题：https://github.com/validator/validator/issues/489
截至 2016 年 5 月，<style scoped> 已从 whatwg specification.
2020 年更新
在当前的VueJs单文件组件中，有一个带有"scoped"属性的样式部分动态转换CSS 类 "compile" 时间，以便它们仅限于该组件的范围。
How to correctly use "scoped" styles in VueJS single file components?
就个人而言，我喜欢这种集中式方法 CSS 往往会变得陈旧和脆弱。新开发人员通常只是向项目添加新 类，因为他们不想破坏现有设计。清理旧的 CSS 似乎从来没有出现在任何人的待办事项列表上...