CSSの継承を破る方法は？

Question

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

結果のように見えます：私は私のウィジェットクラスにCSSスタイルを適用

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

動的に。企業のスタイリングと一貫して見えるようにする。

クライアントアプリケーションのスタイルが実行時に適用されたスタイルを上書きするという問題があります。クライアントが持っている場合たとえば

は、それが私のスタイルを上書き：

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

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

Answer 1

私は、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; 
} 

EDIT

クライアントもそれが問題を引き起こす可能性が!importantを使用している場合。 jsFiddle.comを例としてセットアップできれば、問題を見つけるのに役立つかもしれません。

私はそれが助けてくれることを願っています！それはスタイルのルールの「切り札」だとして!importantを追加するルートを行く

EDIT2

注意、最後の手段でなければなりません。

Answer 2

スタイルの継承をそのまま継承することはできませんが、あなたのスタイルがより重要であるか、正しい順序でロードされるようにして、あなたのスタイルが上に出るようにすることができます。

!importantタグをご覧ください。

また、スタイルシートを読み込んだ後、あなたのスタイルシートが先行する（インラインでない限り）。 Javascriptを使用すると、ボディがロードされた後にスタイルをロードできます（ただし、「フリッカー」効果が得られます）。

Answer 3

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

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

を参照してください：あなたの例パー

CSS Specificity via css-tricks.com

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

.widget .container { 
    font-family: Arial; 
} 

Answer 4

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

他にも言及したように、別のオプションは!importantです。

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

Answer 5

！important css属性の使用は悪い習慣とみなされます。これは、優先順位の競合の可能性を招き、長期的にはcssのトラブルシューティングを非常に困難にするためです。

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

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

例えば、

。次に、上書きを具体的に定義します。