需要在页面的某个部分禁用样式

Question

我正在制作一个A / B网站。主要是为了好玩。它有两个部分。它从Internet获取页面并将其显示在容器中（div #page）。所以我获取example.com，并更改基数并在div中显示它。到现在为止还挺好。

uppper部分是我网站的内容（div＃header）。我显示菜单，表单（指定网址）和其他一些东西。

问题是：example.com的css也适用于我网站的元素。我如何阻止这种情况发生？我希望example.com的css仅适用于#page，而不是#header

有没有办法做到这一点？我知道我可以使用重置助手，但似乎不是最佳解决方案：必须重新定义所有内容。另外，我的网站的css将适用于example.com

任何想法，或者这是否可以撤销？

Answer 1

将example.com与iframe隔离。要与该页面上的javascript进行互动，请按照此answer

进行操作

Answer 2

您可以尝试隔离所有样式，而不是将更具体的选择器放在.css中所有选择器的前面。

所以，如果有一堆样式选择器：

.main{ ... }
#myContainer { ... }
#menu .menu-item { ... }
p { ... }

（或者它可能是什么）

然后在HTML的最顶层元素（例如BODY元素）中添加一个id，类似于'myPage'，然后将所有css选择器更改为：

#myPage .main{ ... }
#myPage #myContainer { ... }
#myPage #menu .menu-item { ... }
#myPage p { ... }