33

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

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

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

例えば：

div{
    background-color:red;
}

したがって、div に背景色を設定しないと、望まなくても赤く表示されます。

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

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

ありがとう

4

9 に答える 9

18

特定の要素のスタイルを「リセット」することはできません。不要な/必要のないすべてのスタイルを上書きする必要があります。これを CSS で直接行うか、JQuery を使用してスタイルを適用する場合 (どちらが簡単かによって異なりますが、完全に不要なため、JavaScript/JQueryを使用することはお勧めしません)。

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

于 2011-09-13T07:33:29.093 に答える
12

関連する/重要な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を追加できます。このオプションが失敗した場合、顧客は意図的にレイアウトを台無しにしようとしています。

于 2011-09-13T08:20:14.977 に答える
8

CSS を上書きして auto を使用することができます

これは特に色で機能するとは思いませんが、次のような親プロパティがある問題に遭遇しました

.parent {
   left: 0px;
}

そして、次のようなもので子供を定義することができました

.child {
   left: auto;
}

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

于 2013-11-20T20:24:42.530 に答える
3

技術的に探しているのは、省略形のプロパティallと組み合わせたunset値です。

unset CSS キーワードは、プロパティが親から継承されている場合は継承された値にリセットし、そうでない場合は初期値にリセットします。つまり、最初のケースでは inherit キーワードのように動作し、2 番目のケースでは initial キーワードのように動作します。これは、CSS の短縮形 all を含む、あらゆる CSS プロパティに適用できます。

.customClass {
  /* specific attribute */
  color: unset; 
}

.otherClass{
  /* unset all attributes */
  all: unset; 
  /* then set own attributes */
  color: red;
}

初期値も使用できます。これはデフォルトで初期ブラウザ値になります。

.otherClass{
  /* unset all attributes */
  all: initial; 
  /* then set own attributes */
  color: red;
}

別の方法として:
可能であれば、クラスまたは ID を一種の名前空間にカプセル化することをお勧めします。

.namespace .customClass{
  color: red;
}

<div class="namespace">
  <div class="customClass"></div>
</div>

セレクターの特異性のため、これは自分のクラスにのみ影響します

これは、ネスト機能を備えたSASSのような「プリプロセッサ スクリプト言語」で実現する方が簡単です。

.namespace{
  .customClass{
    color: red
  }
}
于 2020-03-09T12:32:36.193 に答える
1

divこれを試してみてください: red 以外のスタイルやコンテンツのないプレーンを作成しますdiv。これで、プレーンのすべてのスタイルに対してループを使用し、div次にインナーに割り当てて、divすべてのスタイルをリセットできます。

もちろん、誰かがすべてdivの にスタイルを割り当てた場合 (つまり、クラスを使用しない場合。CSS は になりますdiv { ... })、これは機能しません。

このような問題の通常の解決策はdiv、独自のクラスを指定することです。divそうすれば、サイトの Web デザイナーは、デザインの残りの部分に合うようにスタイルを調整できます。

于 2011-09-13T07:38:16.980 に答える
0

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

area { background-color : red; }
于 2015-11-08T19:51:10.413 に答える
0

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

<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>
于 2014-06-28T10:51:41.690 に答える
0

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

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

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

于 2011-09-13T07:37:30.717 に答える
-1

簡単な方法の 1 つは!important、css で修飾子を使用することですが、これはユーザーから同じ方法でオーバーライドできます。

おそらく、DOM全体をトラバースして（再）定義されたクラスを見つけ、cssスタイルを削除/強制することで、jqueryで解決策を達成できます。

于 2011-09-13T07:34:09.673 に答える