Question

我正在做一份报告，在报告中我必须提供来自不同提供商的电子邮件，这些电子邮件附带自己的css（通常是内联css，但有时它们会应用一般样式）。我通常使用iframe来封装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必须有效，所以任何建议都会很棒！

Answer 1

您可以将#email添加到您的css选择器中，使其仅适用于您的div。

例如，更改

.classname { display: block }

到

#email .classname { display: block }

编辑：如果您无法控制电子邮件CSS，请参阅arxanas建议，请考虑使用LESS。 Less是允许嵌套CSS选择器的CSS预处理器。如果你包含less.js，那么你可以这样做：

#email {
    CSS goes here
}

less.js会解析它并将其转换为CSS。

Answer 2

您可以尝试检查电子邮件css部分是否与您自己的类名冲突。我刚发现这篇帖子对你有帮助： Listing known CSS classes using Javascript

封装css

2 个答案: