javascript - 我的样式被我用 ajax 获得的 html 覆盖

Question

我正在构建一个群发邮件系统，您可以在其中查看电子邮件在发送之前的预览。我使用 jquery 将电子邮件 html 呈现到预览框中——$().html(theHtml).

Html 电子邮件的样式使用所有内联 css。当我填写 html 时，它会覆盖我的一些 css。

我正在寻找一种解决方案来完全阻止这种情况的发生。有什么方法可以自我包含电子邮件 html/css，这样它就不会影响整个文档？

我知道在我的样式中添加 !important 可以解决问题，但这不是一个非常可扩展的选项。

提前致谢。

score 1 · Accepted Answer

不幸的是 !important 是覆盖内联样式的唯一方法 - 这就是特异性的工作方式。

但是，您可以通过使用 ID 和类等使所有“包装器”CSS（例如，您的页面的 CSS，而不是 HTML 电子邮件预览）更具体，这样它们的样式就不会被覆盖，从而绕过它。嵌入在 HTML 电子邮件中的通用样式声明。

不过我有点困惑 - 你是在尝试覆盖“内联”样式（如在具有 style="your css here" 属性的元素中）还是嵌入 CSS（例如“your css here”）？如果是后者，只需在您自己的 CSS 中使重要的东西更具体。

不过，按照 Sander 的建议，使用 iframe 可能比尝试重构 CSS 特异性规则更简单。

score 0 · Accepted Answer

0

您的网站和电子邮件是否使用相同的class/名称？id这不应该是这样。

于 2012-11-20T19:29:09.747 回答

score 0 · Accepted Answer

我强烈建议为您的 CSS使用伪命名空间。

基本上，为您的 CSS 添加一个不会包含在内联 3rd-party 内容中的任意前缀：<div class='foo'>变为<div class='myapp-foo'>

最近在我们的项目中使用了这种做法，它只需要更多的纪律，但使应用程序更易于管理以嵌入其他内容。

3 回答 3