如何应用范围样式表？ [英] How to apply scoped stylesheet?

问题描述

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

Is there any way I can apply bootstrap.css only on a div element ? Example: my global class text-danger is defined, but for the #wrapper I want to apply boostrap.css. So .text-danger should have now 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>

推荐答案

根据您的评论，仅支持作用域css通过firefox，你可以做的一件事（有点hacky但它​​可能适合你的需要）是给你的div一个类 - 像 bootstrap-styles 然后你可以通过引导程序css文件并在每个样式之前放入 .bootstrap-styles

Based on your comments, as scoped css is only supported by firefox, one thing you could do (bit hacky but it may suit your needs) is give your div a class - something like bootstrap-styles then you can go through the bootstrap css file and put .bootstrap-styles before each style

如果您使用某些样式，这将更容易你可以在你的类中包装所有的引导样式

This will be a lot easier if you are using some sort of css processor like less or sass as you can just wrap all the bootstrap styles in your class

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

Other than this, you may try a jQuery solution: https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin

这篇关于如何应用范围样式表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！