html - 限制 CSS 应用于特定的 div

Question

我正在制作一个网络应用程序，用户可以通过该应用程序创建电子邮件事件。

在创建事件时，用户使用 CKEditor 添加电子邮件内容.他/她可以添加内部 CSS 和 JavaScript。创建事件后，它看起来如下图所示。

我必须在 div #email_content 中准确显示电子邮件内容预览。但是为页面编写的通用 CSS 应用于 #email_content，反之亦然。我无权修改通用 CSS。

---

如何显示 email_content 预览的确切外观？

注意:我知道将 iframe 用于 email_content。这是可能的，但我正在寻找另一种解决方法。

Answer 1

这是一个常见问题，(目前)还没有一个简单、通用的解决方案。

影子DOM

理想情况下，您会使用 Shadow DOM，因为它专门用于解决此类问题:

Shadow DOM provides encapsulation for DOM and CSS in a Web Component.Shadow DOM makes it so these things remain separate from the DOM ofthe main document. You can also use Shadow DOM by itself, outside of aweb component.

Why would you want to keep some code separate from the rest of thepage? One reason is that on a large site, for example, if the CSS isnot carefully organized, the styling for the navigation can "leak"into the main content area where it was not intended to go, orvice-versa. As a site or an app scales, this kind of thing becomesdifficult to avoid.

• Source
• Also See

Shadow DOM is well-supported as of 2022 .

内嵌框架

光谱的另一端是 iframe。 iframe 在任何地方都受支持，但可能需要对页面进行比您所能做的更大的更改。更重要的是，iframe引入undesirable scrolling behaviors在 iOS 上可能会因版本而异。

有针对性的重置

一个实用但并非万无一失的解决方案是创建一个仅针对您想要隔离的内容的 CSS 重置。

/* The start of a simple reset */
#email_content * {
    border: 0;
    margin: 0;
    padding: 0;
}

这是可能需要将规则标记为 !important 的情况之一。

目标未设置(全部/初始/未设置)

Reset/remove CSS styles for element only