这里的许多答案已经有些过时了，所以这里简要总结了发生的事情scoped属性。
最初（HTML5之前），<style>在外部无效<head>，但大多数或所有浏览器都支持。 “无效”意味着验证者会抱怨它，并且规范（W3C 的 HTML 4 和 XHTML 1 系列）表示不应该这样做。但它奏效了。有时这很糟糕：无论在哪里<style>元素出现在文档中，其规则将适用于整个文档（当然基于所使用的选择器）。这可能会导致作者编写“本地”样式表，该样式表仅适用于文档的某个区域，但可能会意外地重新设置其他区域的样式。
HTML5's scoped属性提案旨在解决这个问题：它会告诉浏览器该工作表中的样式仅适用于<style>的父元素及其后代。另外，在某个时刻<style scoped>还需要成为其父级的第一个子级，这使得任何阅读 HTML 代码的人都可以清楚地了解范围是什么。这style没有该属性的元素仅在<head>元素。
随着时间的推移，没有足够多的供应商实现这一新功能（Firefox 和 Chrome 包含了一些实验性支持），因此它最终被放弃。浏览器行为仍然与 HTML 5 之前一样，但当前规范至少记录了它：<style>现在在整个文档中都是合法/有效的，但规范警告了潜在的副作用（意外地重新设计元素）。
根据当前的规范和浏览器行为，实现“作用域”样式的最佳且最安全的方法是在 ID 的帮助下明确执行此操作，如以下代码片段所示：
<div id="myDiv">
<style>
#myDiv p { margin: 1em 0; }
#myDiv em { color: #900; }
#myDiv whatever { /* ... */ }
</style>
<p>Some content here... </p>
</div>
The div has an id属性，并且样式表中的所有规则显式使用 id 选择器来确保它们仅适用于该 div 内。当然，这仍然需要避免整个文档中的 id 冲突，但是唯一性已经是id属性。
虽然scoped属性被删除，这种方法可以完成工作，具有相当的可读性（当然，像任何代码一样，它可能会被混淆，但这不是重点），应该验证，并且应该适用于几乎所有 CSS 兼容的浏览器。
PS：根据规范，<style> within <body>应该验证。然而，Nu 验证器（标记为实验性）仍然对此抱怨。关于此有一个悬而未决的问题：https://github.com/validator/validator/issues/489
