在某个容器内禁用 Bootstrap CSS，停止覆盖 css

Question

我目前正在使用 bootstrap 和 knockoutjs 来显示一个可以实时预览某些数据的网页。例如，用户在左侧的文本框中输入标题。然后，页面右侧会更新以根据其他一些设置格式化该文本。所以它可能类似于

{title}

或者它可能是 {title}。但是，此时用户请求的只是纯文本标题。

问题在于，预览实际上是用户创建的 HTML 文档。因此，一些引导 CSS 会覆盖用户指定的 CSS。所以上面的

将继承引导 h1 CSS 类，而不是使用用户 HTML 模板中的任何内容。这意味着在使用创建的文档时，预览可能与实际发生的不同。

JSFiddle 示例：http://jsfiddle.net/Piercy/4fcmk/

HTML：

<div class="content">
<h1>Header 1</h1>

    <div id="Preview">
        <!-- Start Html Template -->
        <style>
            .header
            {
                color: red;
            }
        </style>
        <h1 class="header">Header Class</h1>
        <!-- End Html Template -->
    </div>
</div>

CSS：

.content h1
{
    color: blue;
}

用户会期望“标题类”是红色的，因为他们对内容 css 一无所知。在我的代码中，我使用的是引导程序，但这显示了问题的简化版本。通常，您只会使 CSS 更具体，但由于用户不了解引导程序（或在 jsFiddle 示例内容中），我们不能真正期望他们修改 CSS。

我需要尝试找出一种方法来停止某个容器（在 jsFiddle 中预览 div），使用它的父级正在使用的样式表，或者找出一种我可以修改引导 CSS 的方法，以便不太可能出现覆盖问题。

当然，将它粘贴在 iframe 中可以实现这一点，但我会在尝试访问和修改预览时遇到问题。

我对所有想法持开放态度，只是想尝试找到最合适的方法来处理这种情况。我发现这很难写在纸上，所以如果难以理解，我深表歉意。

Answer 1

据我了解，没有办法告诉 CSS 不继承样式。不过，这里有一个有趣的解决方法。

获取 bootstrap.css 文件并将其放入您选择的 CSS 预处理器（我使用 LESS）。

接下来，使用 ID 或 bootstrap 类包装所有样式，如下所示：

#bootstrap { ...all the bootstrap styles go here. }

然后，将其保存为 .less 文件并编译。您的结果将是从 #bootstrap 或 .bootstrap 继承的所有引导程序样式（取决于您是使用 ID 还是类来包装引导程序的样式）。

最后，将用户不会在 div 中编辑的任何标记包装在模板中，并为该 div 指定 #bootstrap 或 .bootstrap 类的 id，并仅包含我们刚刚使用 LESS 处理的引导文件。

这会处理用户的 CSS 不继承自引导程序。但是，您的用户仍然可以编写引导程序将继承的样式。为了解决这个问题，将用户的内容包装在类似 #user 或 .user 的 id 或类中，并要求他们以 .user 开始所有样式 > 喜欢这样：

.user > h1 {color: red;}
.user > p {font-size: 18px;} 

这应该将您的 HTML 模板的样式与您的用户的样式分开 - 它只需要您的用户多做一点工作。

这里有一个jsfiddle 来演示：