html – 封装css_html-js-css

概述我正在做一份报告,在报告中我必须提供来自不同提供商的电子邮件,这些电子邮件附带自己的css(通常是内联css,但有时它们会应用一般样式).我通常使用iframe封装css所以它不会破坏我的但我现在不能使用它. 有没有办法在不使用iframe的情况下封装css？这是我遇到的问题的一个例子： <html> <head> <style> // I enclose it to c 我正在做一份报告,在报告中我必须提供来自不同提供商的电子邮件,这些电子邮件附带自己的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必须有效,所以任何建议都会很棒！

解决方法您可以将#email添加到您的css选择器中,使它们仅适用于您的div.

例如,改变

.classname {display：block}

至

#email .classname {display：block}

编辑：如果您无法控制电子邮件CSS,如arxanas所示,请考虑使用LESS. Less是一个CSS预处理器,允许嵌套css选择器.如果你包含less.Js,那么你可以这样做：