[英]How are styles within div's made 'safer' (i.e. so they do not override parent styles)
我正在实施一个电子邮件客户端。 我面临的问题之一是显示电子邮件（即电子邮件的正文）可能会中断一般 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样式会破坏 Web 应用程序其余部分的样式（只要我保持在同一页面上）。
我已经尝试了一切来防止它发生。 我不能使用 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字符串的style标签内的样式之前添加类？
简单的答案，考虑到 CSS 的工作原理：CSS 不关心它在哪里声明，它在全球范围内启动。 如果你有一个规则div { ... }那么它适用于文档中所有地方的所有 div，并且改变它们所做的唯一方法是用更具体的规则覆盖属性。
而这正是你做什么div.classname ：这并不适用于所有的div，只与类的div classname 。 想要绝对安全：将您自己的安全类添加到每个元素，并使用依赖于这些的选择器声明 CSS：
<div class="personal safety">
<p class="personal safety">
</p>
</div>
现在我们为这些元素定义我们想要的样式：
div.personal.safety { ... }
p.personal.safety { ... }
完成后，此 CSS 将仅适用于我们的代码。
除了“某种程度”之外，因为如果您在碰巧已经使用“个人安全”作为 CSS 类的页面上使用它，那么您仍然会遇到冲突。 通常的技巧是提出对您的使用足够具体的类，它们不会发生冲突。
然后第二个问题当然是你没有明确设置的任何 CSS 值，你将继续从拥有文档继承，所以如果拥有文档中有这个：
div { background: red }
并将其用于特定的片段内容：
div.personal.safety { font-family: fantasy }
那么这将导致您的片段内容成为带有幻想字体的红色 div。 因为您没有更改代码段 HTML 的背景颜色。
这基本上都是“CSS 的基础知识”，所以我也强烈建议您阅读 CSS 的工作原理。 阅读 O'Reily 的书，或谷歌搜索一些教程（不是 w3schools 或 MDN 单个 CSS 规则的示例，而是正确的“学习 CSS”教程）。
并阅读您在评论中获得的链接：安全性不是开玩笑的，把那部分做对。
RE Javascript 问题：
$('div.result').html(element).parent().addClass('safestyles');
此外，这看起来像 jQuery 而不是通用 JS，所以我给出了 jQuery 答案。
如果您的帖子暗示了嵌套的 BODY 标签，则应用程序的 BODY 标签可能与电子邮件本身的 BODY 标签冲突。
尝试将电子邮件放在 DIV 中，并设置该 DIV 的样式。
RE .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>
http://jsfiddle.net/xLeewd2w/ << 提供的示例
您提供的 html 代码
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>';
删除讨厌的 !important 标签
var newhtml = myhtml.replace(" !important", "");
这是我设置 html 内容的地方，将 id 更改为您选择的容器
var example = $("#parsedhtml");
我将在容器中设置 html
example.html(newhtml);
然后在#test-strong 的 id 之后更改 css，仅在示例中。
$("#test-strong", example).css({"background-color": "#ffe", "border": "5px solid #ccc", "font-size": "30px", "color":"red", "float":"right"});
如何将复杂的样式（即样式表）传递给React组件作为道具？
[英]How do I pass complex styles (i.e. stylesheets) to React components as props?
嵌套的DIV表（即表中的表），如何使用所有数据构建对象？
[英]Nested DIV tables (i.e. table within table), how to build an Object with all the data?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.