私はチャットウィジェットを作成しています。私はたくさんのCSSを上書きしたいと思います。たとえば、これはウェブサイトのテーマのCSSの場合：複数のCSSルールを上書きする
textarea {
color: red;
margin: 10px;
}
と私は同じように私のウィジェットのスタイルを設定する場合：のみ私のウィジェットのCSSは動作するはず
textarea {
padding: 5px;
}
。しかし、デフォルトでは両方のCSSをテキストエリアに追加しています。どうすればそのウェブサイトのCSSが追加されないようにすることができますか？
Marc Bが述べたように、チャットをiframeに入れることができます。この場合、独自のスタイルシートを個別に作成することができます。他の場所でのコメントで指摘したように、
textarea {
all: unset;
padding: 5px;
}
さらに：
ウィジェットのCSSを：あなたは、インラインそれを使用する必要がある場合
、あなたは他の場所で設定されているものを設定解除するall CSSプロパティを使用することができます、最良の方法は、たとえば、テキスト領域に対して異なるクラスを作成し、必要に応じてそれらを使用することです：
textarea.main {
color: red;
margin: 10px;
}
と私は同じように私のウィジェットのスタイルを設定する場合：
textarea.chat {
padding: 5px;
}
そして、何が必要に応じて、
<textarea class="main">
または
<textarea class="chat">
を使用しています。
まあ、私は本当に書くのは簡単だと思っています！すべてのあなたのCSSルールにとって重要です。単に ";"それがあなたにとって簡単な方法なら「！important」、本当にiframeを本当に使うことができるのであれば
'！important'はひどいことです。複雑なCSSファイルで使用されると事実上管理が難しくなります。この質問を見てください：http://stackoverflow.com/questions/3427766/should-i-avoid-using-important-in-css –
私はそれがあなたのためにiframeを使用することも簡単だと言っただけです。 –
そして私はそれは簡単だが、非常に悪いことだと言った。 –
シンプルな：あなたのチャットは、完全に独立したCSSを持つことができます。別のドキュメント内に表示されることがあるドキュメントを完全に分離します。 –
チャットウィジェット内のすべての要素を.chat-widget * {margin：0;}のようなルールでリセットすることができます。パディング：0; color：black;}次に各要素のスタイルを作成します。テキストエリア{パディング：5px; }。私の意見では、iframeは最良の解決策ではないかもしれません。 Iframeはサイズに適切に対応するのに問題があり、iframeの部分とiframe以外の部分とのやりとりを達成するのが難しい場合があります。 – Davey