html - ページ上のスタイルシートで CSS サイト スタイルをオーバーライドする

Question

ページ上の他のすべての CSS をオーバーライドして、別のスタイルシートを適用する方法はありますか? スタイルシートで H1、H2、P タグが指定されたファイルがありますが、モーダル ウィンドウで個別のスタイルを適用したいのですが、サイト スタイルの代わりにスタイルが無視されています。適用されている最初のサイト スタイルを停止する方法はありますか

Answer 1

最も簡単な方法は、必要なシートを除いて、JS を使用してページの HEAD 要素からすべてのスタイルシート タグを削除する (またはそのシートに追加する) ことです。

jQuery を使用する場合は、

$('link[rel=stylesheet]').remove();

または、特定のシートをターゲットにするには:

$('link[rel=stylesheet][href~="whatever.css"]').remove();

ただし、これは @Olly Hodgson が指摘したようにやり過ぎであり、ページに依存するスタイルを破壊します。

現実的には、好みのスタイルシートを他のすべて (およびインライン CSS) の下に配置すると、境界を使用しないルールが上書きされます!important。または、CSS を記述していて、特定のスタイルが強制されていない場合は、次のように使用します!important。

   div{height:99px!important;}

Answer 2

オーバーライドする必要があるスタイルのすぐ下に、新しいスタイルを記述します。これはあなたのために働くでしょう。

Answer 3

他のスタイルシートがすでにロードされているページに、別のスタイルシートを追加できます。次に、そこに記述したルールが、上書きしたいルールよりも具体性が高いことを確認してください。

したがって、メイン ページの CSS に次のようなものがあるとします。

p { color: #000000; }

次のようにモーダルでオーバーライドできます（モーダルに があると仮定しますclass="modal"）：

.modal p { color: red; }

もう 1 つのオプションは、スタイルのみが提供されたページを使用して、モーダル コンテンツを iframe にロードすることです。