Javascript div'中的样式如何；s制造'；更安全'；（即，这样它们就不会覆盖父样式）_Javascript_Jquery_Html_Css

Javascript div'中的样式如何；s制造'；更安全'；（即，这样它们就不会覆盖父样式）

javascript jquery html css

Javascript div'中的样式如何；s制造'；更安全'；（即，这样它们就不会覆盖父样式）,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在实现一个电子邮件客户端。我面临的一个问题是，显示电子邮件（即电子邮件正文）可能会中断常规web应用程序（而不仅仅是div）的样式假设我有一个JS变量： var element = $(data.bodyHTML); $('div.result').html(element); 其中data.bodyHTML是电子邮件正文的HTML内容，其中包含以下内容： <html> <head> <style> div, p, span, a {

我正在实现一个电子邮件客户端。我面临的一个问题是，显示电子邮件（即电子邮件正文）可能会中断常规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>

.SafeStyles放置在每个样式标记/类/id的前面，以防止对父项进行任何重写

但这是如何做到的？这是我的问题

任何形式的帮助或建议都将不胜感激。谢谢

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

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

简单回答，给定CSS的工作方式：CSS不关心声明在哪里，它在全局范围内起作用。如果您有一个规则

div{…}

，则该规则适用于文档中任何地方的所有div，并且更改它们的操作的唯一方法是使用更具体的规则覆盖属性

这正是您对

div.classname

所做的：这并不适用于所有div，只适用于具有类
classname
的div。想要绝对安全：向每个元素添加您自己的安全类，并使用依赖于以下内容的选择器声明CSS：

<div class="personal safety"> <p class="personal safety"> </p> </div>
完成后，此CSS将仅适用于我们的代码
除了“有点”，因为如果你在一个已经使用“个人安全”作为CSS类的页面上使用它，那么你仍然会遇到冲突。通常的诀窍是提出一些特定于您使用的类，它们不会发生冲突
当然，第二个问题是，任何未显式设置的CSS值，都将继续从所属文档继承，因此，如果所属文档中存在以下内容：

div { background: red }
您可以将其用于特定的代码段内容：

div.personal.safety { font-family: fantasy }
然后，这将导致您的代码段内容是一个带有幻想字体的红色div。因为您没有更改代码段HTML的背景色
这些基本上都是“CSS的基础知识”，因此我强烈建议您阅读CSS的工作原理。阅读O'Reily的书，或谷歌的一些教程（不是w3schools或MDN的个别CSS规则示例，而是正确的“学习CSS”教程）

阅读评论中的链接：安全不是闹着玩的事，把这部分做好。
关于Javascript的问题：

$('div.result').html(element).parent().addClass('safestyles');
另外，这看起来像jQuery而不是一般的JS，所以我给出了jQuery的答案
如果你的帖子暗示你有嵌套的BODY标签，那么应用程序的BODY标签可能与电子邮件本身的BODY标签冲突
试着把电子邮件放在一个DIV中，并设置该DIV的样式
关于.safestyles类：似乎您正在样式表中定义样式，但没有将该样式分配给HTML中的任何内容
尝试：

签名
首先确保您理解，然后根据您的示例，然后我猜您可以采取两种可能的方法：从HTML或CSS文件解析所有传入内容的样式源，并在
SafeStyles之前添加样式。
到您找到的每个CSS选择器，因此，只允许在具有该类的div内部的元素上设置这些规则，然后使用
class=“SafeStyles”
显示包装在div中的新内容。或者相反，通过增加所有样式的特殊性来保护您自己的样式，我想它们不太可能被覆盖。
呃，您真的要显示任意html电子邮件吗？如果您确实需要，请使用iframe-不是因为样式，而是因为安全问题。否则，只需像普通电子邮件一样使用纯文本。阅读@a.j true和false。许多人确实使用iFrame。如果你在与gmail进行比较，那么你是对的。然而，我要提到的是，谷歌花了数千万美元、十年时间和数十名开发者来构建Gmail。他们有100000多行代码，让你想要的工作正常。这不是一个简单的答案。如果是我，我会使用iframe。我很感谢bergi的建议，这个链接已经被证明是有用的。Bergi如果你看到这个，也许你可以发布一个真实的答案，这样我就可以投票给你了。在一开始（在这里的人似乎给我打气或CSS的儿童基础知识之前），我一直在寻找一个答案，告诉我其他电子邮件客户端正在做什么来获得所需的行为（覆盖CSS类），而你的是最接近这一点的。谢谢你。我想你会发现，根据你所描述的，你绝对可以做到。如果您通过JS获取数据，那么在注入数据之前，您完全可以对其执行任何您喜欢的操作。这就是我们更加重视安全性的原因。根据@humble.rumble的建议，我建议的解决方案假设OP有嵌套的BODY标签（一个来自应用程序，一个来自电子邮件本身）。这是一个正确的假设吗？你是100%正确的，我不明白，所以我花了时间去弄清楚。看看我对小提琴的回答。
div.personal.safety { font-family: fantasy }

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

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

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>';

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

var example = $("#parsedhtml");

example.html(newhtml);

$("#test-strong", example).css({"background-color": "#ffe", "border": "5px solid #ccc", "font-size": "30px", "color":"red", "float":"right"});