限制CSS应用于特定的div
我正在制作一个Web应用程序，用户可以通过它来创建电子邮件活动。在创建活动时，用户使用CKEditor添加电子邮件内容。他可以添加内部CSS / JS。创建广告系列后，其外观如下图所示。
我必须在div中#email_content确切显示电子邮件内容预览的显示方式。但是，为该页面编写的通用CSS也适用于该CSS，#email_content反之亦然。我无权修改通用CSS。
如何显示email_content预览的确切外观？
注意：我知道可以使用iframeemail_content，但是我正在寻找其他解决方法。
这是一个常见问题，目前还没有简单、通用的解决方案。
影子 DOM
理想情况下，您应该使用 Shadow DOM，因为它专门用于解决这样的问题：
Shadow DOM 在 Web 组件中提供对 DOM 和 CSS 的封装。Shadow DOM 使得这些东西与主文档的 DOM 保持分离。您还可以在 Web 组件之外单独使用 Shadow DOM。
为什么要将某些代码与页面的其余部分分开？原因之一是，例如，在大型网站上，如果 CSS 没有仔细组织，导航的样式可能会“泄漏”到不打算进入的主要内容区域，反之亦然。随着网站或应用程序的扩展，这种事情变得难以避免。
截至 2022 年，Shadow DOM 得到了良好的支持。
内嵌框架
另一方面是iframe. iframes到处都支持，但可能需要对页面进行比您能够进行的更大的更改。更重要的是，在 iOS 上iframes引入不良的滚动行为，这种行为可能会因版本而异。
有针对性的重置
一个实用但并非万无一失的解决方案是创建一个 CSS 重置，仅针对您想要隔离的内容。
/* The start of a simple reset */
#email_content * {
border: 0;
margin: 0;
padding: 0;
}
这是可能需要将规则标记为 的情况之一!important。