web-dev-qa-db-ja.com

要素から継承されたCSSを削除/リセットします

この質問は以前に尋ねられたことは知っていますが、重複としてマークする前に、私の状況はインターネットで見つけたものとは少し異なることを伝えたいと思います。

私は人々が自分のサイトにそれを置くことができるスクリプトを構築し、埋め込みます。このスクリプトは、特定の幅/高さといくつかの情報を持つdivを作成します。

私の問題は、一部のWebサイトがdivのスタイルを宣言し、それがdivにも継承されることです。

例えば：

div{
    background-color:red;
}

したがって、divに背景色を設定しないと、たとえそれが不要であっても赤で表示されます。

私がやってくる唯一の解決策は、できるだけ多くのCSSプロパティを上書きすることです。これにより、私のdivが希望どおりに表示されます。このソリューションの問題は、CSSのプロパティが多すぎて上書きできないことであり、スクリプトをできるだけ軽くしたいということです。

私の質問は、私の問題の別の解決策を知っているかどうかです。 css/javascript/jQueryにあります。

ありがとう

javascriptjquerycssembedded-script
29
Doua Beri

特定の要素のスタイルを「リセット」することはできません。不要な/必要のないすべてのスタイルを上書きする必要があります。 cssでこれを直接行うか、jqueryを使用してスタイルを適用するかどうかは、何が簡単かによって異なります（ただし、これは javascript/jquery を使用することは推奨しません。これは完全に不要なためです）。

Divが他のサイトに含めることができるある種の「ウィジェット」である場合は、それを iframe にラップしてみてください。コンテンツは別のドキュメントであるため、これによりスタイルが「リセット」されますが、これはウィジェットの動作に影響する可能性があります（または完全に壊れる可能性があります）。

17
oezi

関連する/重要なCSSプロパティのみを設定します。

例（divの外観が完全に異なる場合がある属性のみを変更します）：

background: #FFF;
border: none;
color: #000;
display: block;
font: initial;
height: auto;
letter-spacing: normal;
line-height: normal;
margin: 0;
padding: 0;
text-transform: none;
visibility: visible;
width: auto;
Word-spacing: normal;
z-index: auto;

div#donttouchme、<div id="donttouchme"></div>などの非常に具体的なセレクターを選択します。さらに、宣言のすべてのセミコロンの前に `！importantを追加できます。このオプションが失敗すると、顧客は意図的にレイアウトを台無しにしようとします。

11
Rob W

CSSを上書きして、autoを使用してみてください。

私はこれが具体的に色で動作するとは思わないが、私は次のような親プロパティを持っていた問題に遭遇しました

.parent {
   left: 0px;
}

そして、私はちょうど私のようなもので私の子供を定義することができました

.child {
   left: auto;
}

そして、プロパティを効果的に「リセット」します。

8
Seth

これを試してください：赤いdivの外側にスタイルやコンテンツのないプレーンdivを作成します。これで、プレーンdivのすべてのスタイルでループを使用してから、内部のdivに割り当てて、すべてのスタイルをリセットできます。

もちろん、誰かがすべてのdivsにスタイルを割り当てた場合（つまり、クラスを使用せず、CSSはdiv { ... }）。

このような問題の通常の解決策は、divに個別のクラスを与えることです。そうすることで、サイトのWebデザイナーはdivのスタイリングを調整して、残りのデザインに合わせることができます。

1
Aaron Digulla

私が理解したことから、あなたはあなた以外のクラスを継承しないdivを使用したいと考えています。前の返信で述べたように、divの継承を完全にリセットすることはできません。しかし、その問題で私にとってうまくいったのは、別の要素を使用することでした-現在のhtmlページでは頻繁ではなく、確かに使用されていない要素です。良い例は、それを使用する代わりに、それをカスタマイズして理想のように見えるようにすることです。

area { background-color : red; }
0
Dorceus Valjery Welinghton

以下のオプションを使用できます。

<style>
  div:not(.no_common_style){
      background-color:red;
  }
</style>

現在、デフォルトのスタイルを適用したくない場所がある場合、 'no_common_style'クラスをクラスとして使用できます。例：

<div class="no_common_style">
  It will not display in red
</div>
0
bharatpatel

クラスやIDなどの属性である限り、javascript/jQueryクラス修飾子によって削除できます。

document.getElementById("MyElement").className = "";

特定のタグCSSをオーバーライドする（または別の要素を使用する）以外に削除する方法はありません。

0
AlexBay