如何阻止自定义CSS覆盖我的样式？

Question

问题

我有一个用我自己的风格构建的网站，它看起来就像我喜欢的方式。但是，我想通过添加从BootBox下载的自定义对话框来添加额外的功能。

然而，随之而来的广泛样式表绝对会谋杀我的网站，并以各种方式进行屠宰。

无论如何，我可以通过使BootBox.css仅适用于我的代码的一小部分而不是我的所有网站来阻止这一点吗？

Answer 1

你可以使用LESS，这是bootstrap使用的。

示例：

#ContainerWithBootboox {      
   @import (less) "bootstrap.css"; //import bootstrap
}

Doc：http://lesscss.org/

Answer 2

如果您只希望bootbox css以特定div为目标，则需要在每个bootbox css规则前加上目标div的类。

所以，如果你有

<div class="bootbox">
   <!-- bootbox html here -->
</div>

并且bootbox样式是

h1 {
   color: red;
   padding: 0;
}

h2 {
   color: blue;
   margin: 10px 0;
}

然后您需要将其更改为

.bootbox h1 {
   color: red;
   padding: 0;
}

.bootbox h2 {
   color: blue;
   margin: 10px 0;
}

也就是说，如果bootbox css是数千行代码，那么这可能是劳动密集型的。这可能是一个问题，即找到哪些规则专门用于代码并将说明符类仅添加到那些规则中。

Answer 3

在LESS或[SASS]（http://sass-lang.com）的帮助下，不需要大量劳动力，

如果您使用LESS，只需将所有bootbox css规则包装在父根中。例如：

.bootbox {
    /*move all bootbox CSS rules here*/
    h1 { color: inherit;}
    .someclass { color: red;}
}

将编译成：

.bootbox .h1 { color: inherit }
.bootbox .someclass {color:red;}

Answer 4

您可以将BootBox代码放在iframe中。 iframe加载的css仅适用于iframe中的内容。我使用此策略仅将引导程序应用于页面的某些区域（如表格），同时保持页面的其余部分不变。