Chromium 最近实施了 HTML5 中的一项新功能：限定作用域的样式表（也称为
<style scoped>。网页作者可以将样式规则限制为仅应用于网页的某一部分，方法是在 <style> 元素上设置“限定作用域”属性，该元素是您希望将样式应用到的子树根元素的直接子项。这会对样式进行限制，使其仅影响作为 <style> 元素及其所有后代元素的父元素。
示例
下面是一个使用标准样式设置的简单文档：
<html>
<body>
<div>a div! <span>a span!</span></div>
<div>
<style>
div { color: red; }
span { color: green; }
</style>
a div! <span>a span!</span></div>
<div>a div! <span>a span!</span></div>
</body>
</html>
指定的样式规则会将任何 <div> 内的文本和所有 <span> 内的文本设为绿色：
一个 div！ 一个 span！
一个 div！ 一个 span！
一个 div！ 一个 span！
不过，如果我们在 <style> 元素上设置 scoped：
<html>
<body>
<div>a div! <span>a span!</span></div>
<div>
<style scoped>
div { color: red; }
span { color: green; }
</style>
a div! <span>a span!</span></div>
<div>a div! <span>a span!</span></div>
</body>
</html>
然后，它会对样式规则进行限制，以便将其应用于封闭的 <div>（即 <style scoped> 元素的父项）以及该 <div> 内的任何内容。我们称之为“已限定范围”，结果将如下所示：
div！一个 span！
一个 div！ 一个 span！
一个 div！一个跨度！
当然，您可以在标记中的任意位置执行此操作。因此，如果您喜欢尝试新鲜事物，尽可随心所欲地将作用域样式嵌套在标记的其他作用域部分内，以便精细控制样式的应用位置。
使用场景
这有什么好处？
一种常见的使用情形是整合内容：您作为网络作者，希望整合来自第三方的内容（包括其所有样式），但不希望这些样式“污染”网页的其他不相关的部分。这样做的一大优势是能够将来自其他网站（例如 yelp、Twitter、eBay 等）的内容合并到一个网页中，而无需使用 <iframe> 或即时编辑外部内容将其分离出来。
如果您使用的内容管理系统 (CMS) 向您发送了全部混搭成最终网页显示的标记片段，那么您可以使用此功能非常有用，它可确保每个片段的样式与网页上的其他任何内容都隔离开来。这对 Wiki 来说也同样有用。
如果您想在网页上编写一些不错的演示代码，可以轻松地将样式限制为仅演示内容。这样，您就可以在演示中尽情使用 CSS，同时网页上的其他任何内容都不会受影响。
另一个使用场景是简单封装：例如，如果您的网页有侧边菜单，则将特定于该菜单的样式放入标记相应部分的 <style scoped> 部分十分合理。在呈现网页的其他部分时，这些样式规则不会产生任何影响，这样会将它们与主要内容很好地分开！
网页组件模型或许是最引人注目的用例之一。网络组件将成为构建滑块、菜单、日期选择器、标签页微件等组件的绝佳方式。通过提供作用域样式，设计人员可以构建一个微件，并将其与自己的样式打包为一个独立的单元，供他人抓取并组合成一个丰富的 Web 应用。我们计划大量将 <style scoped> 用于 Web 组件和 shadow DOM（可以通过在 chrome://flags 中设置实验性“shadow DOM”标志来启用）。目前，没有什么好办法可以确保样式仅限于 Web 组件，而不依靠内联样式等不良做法，因此作用域样式非常适合这种情况。
为何要包含父元素？
最自然的方式是添加父元素，例如，<style scoped> 规则可以为整个范围设置通用的背景颜色。它还允许为尚不支持 <style scoped> 的浏览器“防御”编写限定范围的样式表，方法是为规则添加 ID 或类选择器作为后备选项：
<div id="menu">
<style scoped>
#menu .main { … }
#menu .sub { … }
…
这模拟了在实现“作用域”时使用样式的效果，但由于选择器较复杂，运行时性能会降低。这种方法的优点是，它支持一种优雅的回退方法，直到 <style scoped> 获得广泛支持，ID 选择器就可以直接舍弃。
状态
鉴于限定了作用域的样式表的实现仍然是一项新的功能，它们目前在 Chrome 中被运行时标志隐藏。您需要获取版本号为 19 或更高级别的 Chrome（目前为 Chrome Canary 版），才能启用它们，然后在 chrome://flags 中找到“启用 <style scoped>”条目（靠近末尾），点击“启用”，然后重启浏览器。
目前尚无已知的 bug，但 @global 以及作用域版本的 @keyframes 和 @-webkit-region 仍在实现过程中。此外，@font-face 暂时会被忽略，因为该规范很有可能发生更改。
我们诚邀所有对此功能感兴趣的用户试用此功能，并与我们分享您的体验：良好、不佳以及（也许）有缺陷。