css - 避免被 css 覆盖

Question

我创建了一个 UI(用于 wordpress 插件)，我在其中让用户选择在 div 中添加文本、图像和视频。 (我们称之为 div ， container )。

我已经研究了一段时间了。我最近添加了 tinyMCE ( WYSIWYG editor) 在 container 中添加文本.

现在，我意识到我犯了一个大错。用户编写的文本被为 wp 管理面板定义的 css 规则覆盖。

例如，

用户输入 <h1>Hello</h1> (在 tinyMCE 的帮助下)，然后我从 tinyMCE 中获取该内容并将其附加到 container 中.

但是问题来了，wordpress的admin css可以有这样的css规则，

h1 {
 color : #d6d6d6;
 line-height: 40px;
 font-size: 30px;
}

因此，它在 tinyMCE 和我的 container 中看起来不同. (因为 tinyMCE 的代码在 iframe 中并且不受 wordpress 的 css 规则的影响，但我的 container 没有)

我想要一些东西，以便 container 中的任何元素不受 wordpress 管理 css 的影响。

我知道一个好的解决方案是将 container里面iframe .但是我写了很多代码都没有想到 iframe我需要 3-4 天才能调整 iframe 的所有内容.可能存在一些跨浏览器问题。

我可以重置一些 wordpress 规则，但有时会失败，因为用户可能会输入任何内容。我需要一些完全证明的东西。

Answer 1

好吧，如果您想撤消特定规则(比如您提到的 h1 规则)，您可以使用 css 通过更具体来覆盖它。

.container h1 {
    color:#000000;
    line-height: 24px;
    font-size: 24px;
}

这将用给定的值覆盖你提到的 css 规则，但只有当元素在容器类中时，(我猜你想使用默认值。)

不幸的是，您必须为 wordpress 的管理 css 更改的所有内容添加撤消规则。