ページの特定の部分でスタイリングを無効にする必要があります

Question

私はA/Bウェブサイトを作っています。主に楽しむため。それは2つの部分を持っています。それはインターネットからページを取得し、コンテナ（div＃ページ）に表示します。そこで私はexample.comを取得し、ベースを変更してdivに表示します。ここまでは順調ですね。

uppperの部分は私のサイトのコンテンツです（div＃ヘッダ）。私はメニュー、フォーム（URLを指定するためのもの）、その他いくつかのものを表示します。

問題は：example.comのCSSは、私のサイトの要素にも当てはまります。これをどうやって止めるのですか？ example.comのCSSを#headerでなく#pageにのみ適用する

これを行う方法はありますか？私はリセットヘルパーを使用することができますが、最適な解決策のようには見えません。すべてを再定義する必要があります。さらに、私のサイトのCSSはexample.comにも適用されます

アイデア、またはこれは元に戻すことができますか？

Answer 1

.css内のすべてのセレクタの前に、より具体的なセレクタを配置することをすべてのスタイルで行うことができます。だから、

スタイルセレクタの束があった場合：次に

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

（または何-今までそれはあるかもしれないが）

は、あなたのHTMLであなたの最上位要素（例えばBODY要素にIDを入れて）、「myPage」のようなものを入力して、すべてのCSSセレクタを次のように変更します。

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

Answer 2

example.comをiframeに分離します。そのページ上のjavascriptとやりとりするには、これに従います。answer