9

Web ウィジェットを作成しました。私のクライアントが彼らのウェブサイトに入れたもの。基本的に、ロード時に webservice を呼び出し、クライアント固有のデータをロードします。

その結果、次のようになります。

<div class="widget">
   <div class="container">
   </div>
</div>

CSS スタイルをウィジェット クラスに動的に適用します。私たちの企業のスタイルと一致するように見えます。

問題は、クライアント アプリケーションのスタイルが、実行時に適用したスタイルを上書きする場合です。

たとえば、クライアントが持っている場合、それは私のスタイルを上書きします:

body {
  margin: 0 auto;
  padding: 0;
  width: 90%;
  font: 70%/1.4 Verdana, Georgia, Times, "Times New Roman";
}

継承を破棄する方法はありますか? クラス ウィジェット スタイルを持つ div が親スタイルを継承しないと言うだけです。

4

5 に答える 5

10

言うまでもなく CSS 継承を壊すことはできないと思いますが、CSS 固有のルールに従うことでそれを回避することはできます。

優れた特異性に関する記事

http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

ウィジェットのスタイルに追加!importantして、デフォルトのスタイルよりも特異性を高めてみてください。

#myWidget{
    font: 100%/1 "Times New Roman", Serif !important;
}

編集

クライアントも使用している場合、!important問題が発生する可能性があります。例を使用して jsFiddle.com をセットアップしていただければ、問題を見つけるのに役立ちます。

それが役立つことを願っています！

EDIT2

!important追加はスタイルルールの「切り札」であるため、最後の手段にする必要があることに注意してください。

于 2012-08-07T17:03:23.170 に答える
2

要素に親スタイルを継承しないように強制することはできません。

ただし、変更したくないすべての可能なスタイルをオーバーライドできます。CSSの特異性が顧客の特異性よりも高い場合、あなたのスタイルがページ上で支配/表現されます。

見る：

css-tricks.comによるCSSの特異性

あなたの例によると、以下のコードを使用すると、body宣言よりも具体的になり、したがってオーバーライドされます：

.widget .container {
    font-family: Arial;
}
于 2012-08-07T17:08:48.587 に答える
1

を試すこともできますinline styling。インライン スタイリングが最優先されます。これは、クライアントのオーバーライドがインポートされたスタイルシートを使用する場合に機能します。

他の人が述べたように、別のオプションは!important.

また、 http://www.w3.org/TR/CSS2/cascade.htmlで関連する仕様を読むこともできます。そこでは、それらがどのようにカスケードするかを正確に説明しています。上記のトリックが機能しない場合は、おそらく仕様が手がかりになるか、これが不可能であることを確実に知ることができます.

于 2012-08-07T17:10:40.083 に答える
1

スタイルの継承自体を壊すことはできませんが、スタイルをより重要にするか、正しい順序でロードして、スタイルが一番上に表示されるようにすることはできます。

!importantタグを見てください。

または、自分のスタイルシートの後に自分のスタイルシートをロードすると、自分のスタイルシートが優先されます (自分のスタイルシートがインラインでない限り)。ボディがロードされた後、Javascript を使用してスタイルをロードできます (ただし、「ちらつき」効果が発生します)。

于 2012-08-07T17:03:09.623 に答える
1

!important css 属性の使用は悪い習慣と見なされます。優先順位の競合が発生する可能性があり、長期的には css のトラブルシューティングが非常に困難になるためです。

この問題に対するより控えめなアプローチは、ウィジェットを ID で区切り、スタイルシートで、次のような「ユニバーサル」セレクターを使用して最も重要なスタイル宣言のいくつかをリセットすることです。

#myWidget *{
  margin: 0;
  padding: 0;
  background: none;
  border: none;
}

例えば。次に、オーバーライドを具体的に定義します。

于 2015-10-22T07:49:05.110 に答える