我正在构建一个群发邮件系统，您可以在其中看到电子邮件发送前的预览。我使用 jquery 将电子邮件 html 渲染到预览框中 -- $().html(theHtml)。
Html 电子邮件的样式全部使用内联 CSS。当我填写 html 时，它会覆盖我的一些 css。
我正在寻找一种解决方案来完全阻止这种情况的发生。有什么方法可以 self 包含电子邮件 html/css，这样它就不会影响整个文档吗？
我知道在我的样式中添加 !important 可以解决问题，但它不是一个非常可扩展的选项。
提前致谢。
最佳答案
不幸的是，!important 是覆盖内联样式的唯一方法 - 这就是特异性的工作原理。
然而，您可以通过使用 ID 和类等使所有“包装器”CSS(例如，您页面的 CSS，而不是 HTML 电子邮件预览)更具体，这样它们的样式就不会被 HTML 电子邮件中嵌入的通用样式声明覆盖。
虽然我有点困惑 - 你是想覆盖“内联”样式(如在具有 style="your css here"属性的元素中)还是嵌入式 CSS(例如“你的 css here”)？如果是后者，只需在您自己的 CSS 中使重要的内容更加具体即可。
关于特异性的更多信息:http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
尽管像 Sander 所建议的那样使用 iframe 可能是比尝试重构 CSS 特异性规则更简单的解决方案。
关于javascript - 我的样式被我用 ajax 得到的 html 覆盖了，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13480527/