Javascript 禁用特定容器内的引导CSS，停止覆盖CSS

我目前正在使用bootstrap和knockoutjs来显示一个网页，其中包含一些数据的实时预览。例如，用户在文本框的左侧输入标题。然后，页面的右侧将根据一些其他设置更新该文本的格式。所以它可能像{title}或者它可能是{title}。但是，此时，用户请求的只是纯文本标题

问题是，预览实际上是用户创建的HTML文档。因此，一些引导CSS会覆盖用户指定的CSS。因此，上面的内容将继承CSS类的引导，而不是使用用户HTML模板中的任何内容。这意味着在使用创建的文档时，预览可能与实际发生的情况不同

JSFIDLE示例：

HTML:

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

我需要尝试找到一种方法来停止某个容器（JSFIDLE中的preview div），使用它的父级正在使用的样式表，或者找到一种方法来修改引导CSS，以减少重写问题的可能性

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

---

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

据我所知，没有办法告诉CSS不要继承样式。然而，这里有一个有趣的解决方法

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

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

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

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

最后，在模板中包装用户不会在div中编辑的任何标记，并给这个div一个#bootstrap或.bootstrap类的id，并且只包括我们刚刚使用较少的代码处理的引导文件

这将处理用户的CSS，而不是从引导中继承。但是，用户仍然可以编写引导将继承的样式。要解决此问题，请将用户的内容包装在类似#user或.user的id或类中，并要求他们以.user>开始所有样式，如下所示：

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

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

---

下面是一个示例：

您可以将样式作为HTML属性放在想要红色的

标记上：

头类

Fiddle:是的，这也会起作用，但我们要做的是尽量减少用户的工作量。所以我们不希望他们不得不修改他们的旧模板或者改变他们的开发风格。一些是草率的，另一些是非常好的，提供了很好的CSS。我们基本上只是试图简化内容编写者的流程，这样他们就不必干扰输入内容的设计。这可能会有所帮助：此外，您可能还可以编写一个脚本，将类.user>预先添加到您用户的所有样式中，并为他们处理该工作。是的，将下载引导程序源代码并以这种方式进行。有点烦人，但从长远来看，这会让我更有控制力。感谢其他尝试这样做的人，使用这个问题的答案以一种非常简单的方式完成上面提到的事情。

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

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