为什么我的 <style scoped> 中的 CSS 代码会全局应用？ [复制]答案

【问题标题】：Why Does My CSS Code in <style scoped> Apply Globally? [duplicate]为什么我的 <style scoped> 中的 CSS 代码会全局应用？ [复制]
【发布时间】：2015-12-04 22:43:47
【问题描述】：

我想将引导样式表链接到并且仅链接到特定表。我在线阅读了<style scoped>@import url()<style> 技巧并尝试将其应用到我的代码中。但是，我在 <style scoped> 块中编写的 CSS 代码仍然适用于全局。这是为什么？是浏览器的问题吗？还有其他方法可以将样式表仅链接到本地元素吗？谢谢！

这是我的试用代码：

<style>
    h2{
        font-family: monospace};
    body{
        font-family:cursive};
</style>
<h2> This is monosapce </h2>
<p> This is curisve font. </p>
    <table data-toggle = "table" data-classes="table table-hover">
        <style scoped>
            @import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css);
            @import url(https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.min.css); 
            h2{
                font-family: "Hypatia Sans Pro"
                }
            </style>
    ...
    </table>

如您所见，我的字体既不是等宽字体也不是草书，因为引导样式表会覆盖它：

【问题讨论】：

我的第一个猜测是您使用的浏览器不支持此属性并将其视为标准样式。 caniuse.com/#feat=style-scoped
当style scoped在浏览器中实现时是否会在那里工作未知，但请注意，对于style scoped，它不是HTML5.1有效的table的孩子元素。

标签： html css twitter-bootstrap

【解决方案1】：

我在网上找到了这个回复：

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

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

在 Chrome 浏览器中转到 chrome://flags/；找到“启用实验性 WebKit 功能”。然后点击启用重新启动浏览器。试试你的代码。它应该可以工作。

【讨论】：