外部PHP ウィジェットを作る方法ページには独自のCSSがあります。 catchは - 外部ページがincludeの場合、ホストページのスタイルシートの影響を受けています。埋め込みウィジェットのスタイルを保持するにはどうすればいいですか？
実際には、含まれているページはコメント 'ウィジェット'（自分の.cssファイルで、約30行ほどではありません）で、高さと幅の柔軟性が必要です。
PHPincludeは、これまでの最善の解決策だったが、私は/ ヌル（追加/除く/スタイル）すべての可能なホストのWebページに合わせてそのCSSファイルを調整し、私の髪を失いました。
例：
ホストページはそうでimgH3に同じ私は、ウィジェットののstyle.cssからそれらをゼロにする必要があり国境、P、とのスタイルを持っている場合。
はどのようにしてのiframeを使用して横に、ホストページスタイルに影響されることから、ウィジェットスタイルシートを保存しますか？
CSSはクライアント側のことです。 PHPとそのページがサーバ上でどのように生成されたかはわかりません。
最終的に生成されるHTMLに焦点を当て、必要なスタイルルールが正しい要素に適用されるようにタグとクラスとIDを再定義する必要があります。
CSSルールの範囲を制限するには、div内のその部分を一意のIDまたはクラスで囲み、CSSセレクタでそのルールを使用して、そのdiv外の要素には適用されないようにします。
あなたがそれを行うことができない場合は、あなたの他の要素に含まれているルールを上書きするために、より強力なルールを使用する必要があります。少し面倒ですが、！importantのようないくつかのテクニックを使用して要素に適用されるスタイルをオーバーライドすることができます。
例えば、以下のサンプルの両方において、第2の規則は、最初に上書きされます：
#comments .link { color: red; } /* Included page rule */
#header .link { color: blue !important; }
又は
#comments .link { color: red; } /* Included page rule */
#header div a.link { color: blue; }
これはあなたのCSS設計する必要があります。ウィジェットが含まれたページを作成します。ウィジェットを含め、ページ全体でCSSをコーディングします。サイトの青の代わりにウィジェット画像の境界線を赤くしたい場合は、そのようにコードを作成します。常に存在するとは限らないウィジェット用の余分なCSSを含めると、既存のルールをノックアウトしたり、別のCSSファイルを含めたりする場合に比べて、わずかなペナルティが発生します。ウィジェットが常にそこにあり、あなたがカバーしているようなスタイルのサイト。サイト用のマスタースタイルシートを使用していますか？ :) –
div内のウィジェットコードをIDで囲んでみてください。次に、ウィジェットで使用されている各CSSセレクターのプレフィックスに接頭辞を付けます。
ex。
<div id="widget"><p class="nav">hello</p></div>
代わりに、
.nav{
// styles
}
あなたが含まれるコードのミニCSSリセットを適用したい場合があります
#widget.nav{
// styles
}
を行います。
<div id="widget">
<!--your code here-->
</div>
今ここで、エリック・マイヤーのような基本的なCSSのリセットを使用して、この内部のすべてに利用できるリセットをかける：今http://meyerweb.com/eric/tools/css/reset/
、独自のCSSを適用するようにように、一意のIDでコードを囲み。ほぼすべての外部CSSが消去され、あなたのものが適用されます。その上
div {/*rules*/};
p {/*rules*/};
と：
私が正しく理解している場合、あなたの含まれるページは、次のようないくつかのCSSルールを持っています。
あなたが最も特定のものに最も一般的なもの（div要素は、ページ内すべて divを選択）（この順序でそれらを使用する：id, class, child-selector）から、あなたのCSSセレクタを変更する必要があり、あなたのルールのみに適用するためにはあなたの含まれている要素。
たとえば、あなたの含まれるページをdiv要素に包まれていると言う、PHPコードは次のようになります。そして、
<div id="my_page">
<?php include "myPage.php"; ?>
</div>
、idを持つ要素の子のみを参照する必要があり、ページのすべてのルールmy_page：
代わりの
div {/*rules*/};
あなたは
012を持っていますCSSスタイルは次のように優先順位を付ける：
あなたが適用する必要がどのくらいのCSSに応じて、「頭」タグの上に令状ができます。
提案が役立つことを願っています。
ありがとうございました。 –
これでShadow DOMが可能になりました：http://stackoverflow.com/a/38919623/4600982 – Supersharp
@Supersharp gotcha thx –