封装css答案 - 爱码网

【问题标题】：encapsulate css封装css
【发布时间】：2012-08-28 20:11:23
【问题描述】：

我正在做一份报告，在报告中我必须呈现来自不同提供商的电子邮件，这些电子邮件带有自己的 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 必须是有效的，所以任何建议都会很棒！

【问题讨论】：

是的！使用scoped 属性。但是，我不相信它在任何地方都得到支持。（嗯，你可以在谷歌浏览器中打开它chrome://flags。）
我确实使用类，让我在问题中更好地解释电子邮件如何破坏我的 css
哦，它可能是我正在寻找的范围属性，但它还不适用于任何主流浏览器:'( w3schools.com/html5/att_style_scoped.asp
我希望我可以同时输入每一个人的计算机，并从他们的搜索结果中屏蔽 w3schools。 只是说

标签： html css parsing iframe

【解决方案1】：

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

例如，改变

.classname { display: block }

到

#email .classname { display: block }

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

#email {
    CSS goes here
}

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

【讨论】：

我认为问题在于样式正在加载，他无法控制它们。
感谢 arxanas 的澄清，我为此场景添加了建议。
是的，我无法控制 CSS，因为它是电子邮件的一部分
嗯，你确实说过你可以处理 HTML（或者更确切地说是“提取 HTML 结构”）。如果你能做到这一点，那么你可以从

【解决方案2】：

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

【讨论】：

我明白了。他可以尝试用稍微修改的标识符来替换这些冲突。但这并不像 hayk.mart 那样简单地使用 css