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

Question

问题

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

然而，它附带的大量样式表绝对会扼杀我的网站，以各种方式扼杀它。

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

score 3 · Accepted Answer

您可以使用 LESS，这就是 bootstrap 使用的。

例子：

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

文档： http: //lesscss.org/

score 1 · Accepted Answer

在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;}

score 1 · Accepted Answer

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

所以如果你有

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

并且引导箱样式是

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 是数千行代码，那么这可能是劳动密集型的。这可能是一个问题，即找出哪些规则专门使您的代码变得笨拙，并仅将说明符类添加到这些规则中。

score 0 · Accepted Answer

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

4 回答 4