html - 防止远程站点 HTML 受 CSS 影响

Question

我有一个应用程序，我允许用户在他们的网站上添加一段代码，然后向网站添加一个小部件，允许他们的用户与应用程序等进行交互。

我现在正在做的是将我所有的 html 放在他们放置在站点上的容器中(希望)有一个唯一的 id。让我们说ts-container。然后，在网站上加载的用于设置元素样式的 css 中，我将 #ts-container 放在样式表中每个选择器的前面。这是保护我的 css 不影响其页面元素的最好且唯一的方法，还是有某种方法可以包装整个样式表而不必实际标识每个类？有没有办法将样式表放在包装器容器中，让它只影响那些元素或其他东西？我应该在 iframe 或类似的东西中执行此操作吗？

只是寻找一些建议，以防我在我的情况下缺少最佳实践。

Answer 1

您可以对 CSS 进行子重置:

#ts-container * {
    margin: 0;
    padding: 0;
    font-size: 13px;
    font-weight: normal;
    background-color: white;
    color: black;
}

您可能需要输入一些额外的样式，但这应该可以防止父文档中的任何 CSS 影响您的小部件。

不过，

iframe 是一种更简单的方法。是否使用它们是一种设计选择。