Question

我正在实施一个电子邮件客户端。我面临的一个问题是显示电子邮件（即电子邮件的正文）可能会中断一般Web应用程序（不仅仅是div）的样式。

说我有一个JS变量：

var element = $(data.bodyHTML);
$('div.result').html(element);

其中data.bodyHTML是电子邮件正文的HTML内容，其中包含以下内容：

<html>
<head>
<style>
    div, p, span, a {
        padding: 0;
        margin: 0;
        color: black;
    }
    .test-div, .test-p, #test-strong {
        color: blue !important;
    }
</style>
</head>
<body>
    <div class="test-div"><p class="test-p">Signature</p><strong id="test-strong">John Doe</strong></div>
</body>
</html>

div, p, span, a样式会破坏网络应用程序其余部分的样式（只要我保持在同一页面上）。

我已经尝试了一切来防止它发生。我无法使用iFrame。我看到其他电子邮件客户端做了类似的事情：

<html>
<head>
<style>
    .SafeStyles div, .SafeStyles p, .SafeStyles span, .SafeStyles a {
        padding: 0;
        margin: 0;
        color: black;
    }
    .SafeStyles .test-div, .SafeStyles .test-p, .SafeStyles #test-strong {
        color: blue !important;
    }
</style>
</head>
<body>
    <div class="SafeStyles">
    <div class="test-div"><p class="test-p">Signature</p><strong id="test-strong">John Doe</strong></div>
    </div>
</body>
</html>

.SafeStyles放在每个样式标记/类/ id的前面，以防止对父项的任何覆盖。

但这是怎么做到的？这是我的问题。

感谢任何形式的帮助或建议。感谢。

编辑：我认为这里的人似乎误解了我的问题。我确切地知道为什么样式会覆盖父级，我知道足够的CSS来理解基础知识。问题是：

在javascript中给出一串html，使用javascript，如何在给定html字符串的样式标记中的样式之前添加类？

Answer 1

简单回答，考虑到CSS的工作方式：CSS并不关心它声明的位置，它在全球范围内开始。如果您有一个规则div { ... }，那么它适用于文档中的所有div，并且改变它们所做的事情的唯一方法是使用更具体的规则覆盖属性。

这正是您使用div.classname所做的事情：不适用于所有div，仅适用于具有类classname的div。想要绝对安全：将自己的安全类添加到每个元素，并使用依赖于这些元素的选择器声明CSS：

<div class="personal safety">
  <p class="personal safety">
  </p>
</div>

现在我们为这些元素定义了我们想要的样式：

div.personal.safety { ... }
p.personal.safety { ... }

完成后，此CSS仅适用于我们的代码。

除了＆＃34;＆＃34;之外，因为如果你在恰好已经使用过的页面上使用这个＆＃34;个人安全＆＃34;作为CSS类，你仍然会遇到冲突。通常的诀窍是提出足够具体的课程，以便他们不会碰撞。

然后第二个问题当然是你没有明确设置的任何CSS值，你将继续从拥有的文件继承，所以如果在拥有的文件中有这个：

div { background: red }

并将其用于特定的代码段内容：

div.personal.safety { font-family: fantasy }

然后这将导致您的代码段内容为幻想字体的红色div。因为您没有更改HTML代码段的背景颜色。

这基本上都是＆＃34; CSS的基础知识＆＃34;所以我也强烈建议您阅读CSS的工作原理。阅读O＆＃39; Reily书，或google获取一些教程（不是单个CSS规则的w3schools或MDN示例，但是正确的＃34;学习CSS＆＃34;教程）。

阅读你在评论中得到的链接：安全不是笑话，正确地解决这个问题。

Answer 2

重新提出Javascript问题：

$('div.result').html(element).parent().addClass('safestyles');

此外，这看起来像jQuery而不是通用JS，所以我给了一个jQuery答案。

如果你有帖子所暗示的嵌套BODY标签，那么应用的BODY标签可能与电子邮件本身的BODY标签冲突。

尝试将电子邮件放入DIV中，然后设置DIV样式。

重新启用.safestyles类：看起来您在样式表中定义了样式，但没有将该样式分配给HTML中的任何内容。

尝试：

<body>
    <div class="SafeStyles">
        <div class="test-div"><p class="test-p">Signature</p><strong id="test-strong">John Doe</strong></div>
    </div>
</body>

Answer 3

首先确保您了解Specificity和Selectors，然后从您的示例中了解，然后我猜您可以采取两种可能的方法：从HTML或CSS文件解析样式源，对于所有传入的内容，将SafeStyles.添加到您找到的每个CSS选择器，从而只允许在该类的div内部的元素上设置这些规则，然后使用{{1}显示包含在div中的新内容}。或者相反，保护自己的风格，通过增加对所有风格的特异性来达到不太可能被覆盖的程度我猜。

Answer 4

http://jsfiddle.net/xLeewd2w/＆lt;＆lt;提供的示例

您提供的HTML代码

SELECT

删除讨厌的！重要标签

var myhtml =
'<html><head><style>div, p, span, a {padding: 0;margin: 0;color: black;}.test-div,est-p,#test-strong {color: blue !important;}</style></head><body><div class="test-div"><p class="test-p">Signature</p><strong id="test-strong">John Doe</strong></div></body></html>';

这是我设置html内容的地方，将id更改为您选择的容器

var newhtml = myhtml.replace(" !important", "");

我会在容器中设置html

var example = $("#parsedhtml");

然后在＃test-strong的id之后改变css，仅在示例中。

example.html(newhtml);

div中的风格如何变得更加安全＆＃39; （即所以他们不会覆盖父样式）

4 个答案: