css - 如何应用作用域样式表？

Question

有什么办法可以只在 div 元素 上应用 bootstrap.css 吗？示例:我的全局类 text-danger 已定义，但对于 #wrapper 我想应用 boostrap.css。所以 .text-danger 现在应该有 color: #a94442;

<style>
 .text-danger {
   color:blue;
 }
</style>

<div id="wrapper">
  <style scoped>
    @import url("http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css");
  </style>

  <p class="text-danger">Some random text</p>
</div>

<p class="text-danger">Outer text</p>

Answer 1

根据您的评论，由于 scoped css 仅受 firefox 支持，您可以做的一件事(有点老套，但它可能适合您的需要)是给您的 div 一个类 - 类似于 bootstrap-styles 然后你可以通过 bootstrap css 文件并在每个样式之前放置 .bootstrap-styles

如果您使用某种 css 处理器(如 less 或 sass)，这会容易得多，因为您可以将所有 Bootstrap 样式包装在您的类中

除此之外，您可以尝试 jQuery 解决方案:https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin