我创建了一个 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 规则,但有时会失败,因为用户可能会输入任何内容。我需要一些完全证明的东西。
最佳答案
好吧,如果您想撤消特定规则(比如您提到的 h1 规则),您可以使用 css 通过更具体来覆盖它。
.container h1 {
color:#000000;
line-height: 24px;
font-size: 24px;
}
这将用给定的值覆盖你提到的 css 规则,但只有当元素在容器类中时,(我猜你想使用默认值。)
不幸的是,您必须为 wordpress 的管理 css 更改的所有内容添加撤消规则。
关于css - 避免被 css 覆盖,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15771459/