仅为一个 div 及其内容启用 (CSS) 样式表答案

【问题标题】：Enable (CSS) Stylesheet for only one div and it's contents仅为一个 div 及其内容启用 (CSS) 样式表
【发布时间】：2013-08-28 09:07:46
【问题描述】：

我正在寻找一个（简单）与 Bootstrap 3 兼容的 WYSIWYG 编辑器 jQuery 插件。我见过很多与以前的 Bootstrap 兼容的 WYSIWYG 编辑器 jQuery 插件，但我的网站使用Bootstrap 3，所以每次我实现这样的 jQuery 插件时，我的 Bootstrap 3 都会破坏按钮并把整个编辑器弄得一团糟。

所以现在我问是否有一个选项可以只为一个 div 及其内容启用 Bootstrap 2 样式表。

我假设 iframe 可以工作，但是，我需要 WYSIWYG 编辑器的内容（当时在 iframe 中），以及“非 iframe”上的文本输入。

【问题讨论】：

标签： css twitter-bootstrap jquery-plugins editor wysiwyg

【解决方案1】：

您可能能够解决此问题的一种方法是将您的 css 限定为该 div。这就是我用我创建的内容管理系统实现的。

例如，假设您为所见即所得 Div 提供了 HTMLEditable 的 ID。

您可以使用您的 css 和该 div 中的所有 css 来定位该 div。

#HTMLEditable .WYSIWYG{
   ....css goes here
}

#HTMLEditable p{
   ....css goes here
}

上面的 css 只适用于那个 div。然后它只是在该 div 中找到您需要的正确 css 的一个案例。

请注意，您可能需要覆盖/重置该 div 的 css 以停止将 bootstrap3 应用于它。

Here 是一个重置 css 的例子。（您还需要确定范围，以确保不会重置所有 CSS）。

编辑：使用 LESS

为了使这更容易，您可以使用引导程序使用的 LESS。

     #HTMLEditable {
      //import the modal css
       @import "bootstrap.css";
    }

您需要创建一个文件“HTMLEditable.less”。然后添加与上面类似的代码。他们会将上述内容编译成 css 并将 css 中的所有内容限定为 #HTMLEditable

查看LESS 站点并查看嵌套。这就是你所追求的。该站点还将向您展示如何编译它。

【讨论】：

谢谢，我知道这会起作用，但问题是，我只想为那个 div 包含 Bootstrap 2 的（缩小的）样式表。我真的不想为每个元素添加“#HTMLEditable”（除非您知道是否有一种（在线）自动化脚本可以这样做）。
在答案中添加了更多内容。看看吧。
谢谢，真的，但它仍然不起作用。可能是因为 bootstrap 2 和 3 javascript 文件搞得一团糟？
嗯。不太确定该建议什么：/
嗯，我认为它会帮助其他用户，对我来说这很有趣，所以无论如何谢谢，你应该回答问题。

【解决方案2】：

你需要把这个 div 的 class 或 id 放在所有 css 规则之前。如果你需要一个 css 文件而不是更少，你可以这样做。

#HTMLEditable{  
    paste in all of your css
}

复制所有这些并将其粘贴到此处：http://less2css.org/ 在较少的区域中，它会为您生成正确的 css。

【讨论】：