封装css
封装css
提问于 2012-08-29 04:11:24
我正在做一份报告，在报告中，我必须呈现来自不同提供商的电子邮件，这些电子邮件都有自己的css (通常是内联css，但有时也会应用常规样式)。我通常使用iframe来封装css，这样它就不会破坏我的css，但我现在不能使用它。
有没有办法在不使用iframe的情况下封装css？
下面是我遇到的问题的一个例子：
<html>
<head>
<style>
// I enclose it to content so it doesn't override the email css
#my_content table, #my_content p {
color: black;
}
</style>
</head>
<body>
<div id='my_content'>
... some stuff ...
<div id='email'>
<html>
<head>
<style>
table {
margin-left: 100cm; // screws up all my tables
}
.... some styles that should only apply inside the email div ...
</style>
</head>
<body>
.... email content ...
</body>
</html>
</div>
</div>
</body>
</html>我可以提取html结构，只获取正文中的内容，但并不是所有的电子邮件看起来都应该是这样的。此外，该html必须是有效的，所以任何建议都将是伟大的！
回答 2
Stack Overflow用户
发布于 2012-08-29 04:16:04
你可以在你的css选择器前面加上#email，使它们只应用于你的div。
例如，更改
.classname { display: block }
至
#email .classname { display: block }
编辑:如果您无法像arxanas建议的那样控制电子邮件CSS，请考虑使用LESS。Less是一个CSS预处理器，它允许嵌套CSS选择器。如果包含less.js，则可以执行以下操作：
#email {
CSS goes here
}less.js将对其进行解析并将其转换为CSS。
Stack Overflow用户
发布于 2012-08-29 04:15:50
您可以尝试检查E-Mail css部件是否与您自己的类名冲突。我刚找到一篇对你有帮助的帖子：Listing known CSS classes using Javascript
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12166827
复制相关文章
相似问题
腾讯云开发者
