需要在頁面的某些部分禁用樣式

Question

我正在制作一個A / B網站。 主要是為了好玩。 它分為兩個部分。 它從互聯網上獲取一個頁面並將其顯示在一個容器中（div＃page）。 因此，我獲取了example.com，並更改了基准並將其顯示在div中。 到現在為止還挺好。

上端部分是我網站的內容（div＃header）。 我顯示了菜單，一個表單（用於指定url）以及其他一些內容。

問題是：example.com的css也適用於我網站的元素。 如何阻止這種情況的發生？ 我希望example.com的CSS僅適用於#page，而不適用於#header

有辦法嗎？ 我知道我可以使用重置助手，但似乎不是最佳解決方案：必須重新定義所有內容。 另外，我的網站的CSS將應用於example.com

有什么想法，或者這是不可挽回的？

Answer 1

將example.com隔離到iframe。 要與該頁面上的javascript進行交互，然后按照此答案進行操作

Answer 2

您可以嘗試隔離所有樣式，而不必在.css中所有選擇器的前面放置更具體的選擇器。

因此，如果有很多樣式選擇器：

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

（或者可能是什么）

然后在HTML的最頂層元素（例如BODY元素）上放置一個id，例如“ myPage”，然后將所有css選擇器更改為此：

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