为页面的某个区域重置 CSS？答案

【问题标题】：Reset CSS for a certain area of the page?为页面的某个区域重置 CSS？
【发布时间】：2010-12-16 10:28:58
【问题描述】：

我正在开发 CMS。它的功能之一是在 WYSIWYG 编辑器中编辑 HTML“块”，显示为单独的页面。

我在 CMS 中有一个区域可以预览这些块。

块依赖于加载到所见即所得编辑器中的“foundation.css”文件。它做了一些小的重置，定义了默认字体和文本颜色，总体上非常简单。

显然，CMS 带有大量 CSS 语句，其中许多会影响字体大小、系列、颜色、行高、填充等一般设置。

当然，当我尝试在 CMS 页面中显示 HTML 块时，它看起来与仅使用 Foundation.css 样式表显示时不同。

有人能想出一种方法来清除 HTML 页面中定义的区域（例如 DIV）吗？我不能。

显示块和嵌入foundation.css 的Iframe 会有所帮助，但是当必须渲染5-10 个IFrame 并在加载后通过JS 调整高度时，我担心用户的工作流程。呸。
我曾考虑将所有其他 CSS “提升”到一个子类（即调整 CMS 的 CSS），但这会涉及到很多文件，有些可能是 PHP 源代码，我会而不是那样做。

我认为这没有解决方案，但你永远不知道。

【问题讨论】：

【解决方案1】：

有CSS Reset 样式表可用；也许你可以修改这些？

【讨论】：

【解决方案2】：

您可以为所有包含所见即所得编辑器代码的 div 赋予一个类，然后重置该 div 内的所有内容。

【讨论】：

是的，这可能是唯一的方法；但是我希望有一些更自动化的东西，因为我在 CMS 中的某个地方引入的每一个 CSS 设置，我都必须确保重置器也会重置它 - 有时会重置为我什至不知道的默认值。
是的，您还需要覆盖内容区域inside 的每个元素，这些元素也可以匹配其他样式表规则，并且覆盖规则需要更高的特异性。不会真的起作用，除非你把所有东西都洒在!important 灰尘中。

【解决方案3】：

除了 GSto 所说的之外，您还可以设置一些样式，例如

div.clearCss *
{
  property: value !important 
}

重置所有相关的样式属性。此样式应适用于将 clearCss 设置为类的元素下的任何内容，因此您只需将该类应用于父元素。

【讨论】：

【解决方案4】：

您是否在 CMS 中使用特定的所见即所得编辑器？我发现 Telerik RadEditor 将允许您将特定样式表用于编辑器的实际编辑区域。您正在使用的编辑器也许也可以做到这一点。

祝你好运，希望这会有所帮助。

【讨论】：

【解决方案5】：

如果你以TinyMCE 为例，他们也使用 iframe，我认为他们和你有同样的问题。我在后端和某些页面上使用它 4 iframe。我没有看到任何性能问题。

使用 TinyMCE 可以压缩您需要的函数（在 PHP、JSP、.NET 和 Coldfusion 中），这会给您带来极大的速度提升。

三思而后行，在您编写自己的所见即所得编辑器之前，其他的都经过了很好的测试，并且有大量非常好的插件可以满足几乎所有需求。

【讨论】：