为什么我的CSS代码在<style scoped =“”>全局申请？

Question

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

＆＃xA;＆＃xA;

这是我的试用代码：

＆＃xA;＆＃xA;

 ＆lt; style＆gt;＆＃xA; H2 {＆＃XA; font-family：monospace};＆＃xA;体{＆＃XA;字体家庭：草书};＆＃XA;＆LT; /风格＆GT;＆＃XA;＆LT; H2＆GT;这是monosapce＆lt; / h2＆gt;＆＃xA;＆lt; p＆gt;这是curisve字体。 ＆LT; / P＆GT;＆＃XA; ＆lt; table data-toggle =“table”data-classes =“table table-hover”＆gt;＆＃xA; ＆lt; style scoped＆gt;＆＃xA; @import url（https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css）;＆＃xA; @import url（https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.min.css）; ＆＃XA; H2 {＆＃XA; font-family：“Hypatia Sans Pro”＆＃xA; }＆＃XA; ＆LT; /风格＆GT;＆＃XA; ...＆＃XA; ＆lt; / table＆gt;＆＃xA;  

＆＃xA;＆＃xA;

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

＆＃xA;＆＃xA;

＆＃xA;

Answer 1

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

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

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

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