CSS <style scoped =“”>适用于范围</style>之外

Question

范围样式的最简单示例在Chrome中不起作用（第25版）：

<div>
    <h1>Hello 1</h1>
</div>
<div>
    <h1>Hello 2</h1>
    <style scoped> h1 { color: red; } </style>
</div>

试一试：http://jsfiddle.net/RWW8r/2/

h1都变为红色：

范围样式应仅适用于第二个h1。

我看到该功能是在Chrome中实现的，为什么不起作用？我做错了吗？

Answer 1

你没有做错任何事。截至目前，作用域CSS仍然是一项实验性功能，目前任何浏览器都不支持。

但是，如果您想在Chrome中使用它，可以执行以下操作：

• 转到Chrome浏览器中的chrome：// flags /;
• 查找“启用实验性WebKit功能”。并单击“启用”
• 重新启动浏览器。
• 试试你的代码。它应该工作。

Answer 2

我认为当您读到Chrome已实现它时，它们意味着它处于开发版本中，因为它肯定不在当前版本的v25中。

有关兼容性图表，请参阅CanIUse网站：http://caniuse.com/style-scoped

同样适用于Firefox;它仅在当前的alpha中。

鉴于开发速度，它将在相对较短的时间内处于这两种浏览器的发布版本中，但简短的回答是它现在不存在。