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

Question

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

{title}

或者它可能是 {title}。然而，此时用户所要求的只是纯文本标题。

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

将继承 bootstraps 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;
}

用户会期望“Header Class”为红色，因为他们对内容 css 一无所知。在我的代码中，我使用的是 Bootstrap ，但这显示了该问题的简化版本。通常，您只会使 CSS 更具体，但由于用户不了解 bootstrap(或 jsFiddle 示例内容)，我们真的不能指望他们修改 CSS。

我需要尝试想办法停止某个容器(在 jsFiddle 中预览 div)，使用它的父级正在使用的样式表，或者想办法修改 bootstrap CSS，以便不太可能出现覆盖问题。

当然，将其粘贴在 iframe 中可以实现此目的，但我在尝试访问和修改预览时会遇到问题。

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

Answer 1

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

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

接下来，用一个 ID 或 bootstrap 类包装所有样式，如下所示:

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

然后，将其保存为.less 文件并进行编译。您的结果将是所有从 #bootstrap 或 .bootstrap 继承的 Bootstrap 样式(取决于您是使用 ID 还是类来包装 Bootstrap 的样式)。

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

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

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

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

这是一个 jsfiddle演示: