要素の下にあるすべての要素を外部スタイルのプロジェクトから分離する適切な方法

Question

私のプロジェクトには新しいjsカレンダーが追加されました。このようなカレンダーが表示さ -

<div style="position: absolute;" id="container"> 
    <table cellspacing="0" cellpadding="0" align="center" class="DynarchCalendar-topCont">   
     <tbody> 
      <tr><td> 
      // lots of elements inside 
      <td><tr> 
     </tbody> 
    </table></div> 

問題は、カレンダーのビューが原因このように私のプロジェクトでは、いくつかのスタイルに歪んで表示されていることである -

div#sel_filters div.fields div { 
    margin-left: 10px; 
} 

div.filters div.fields div { 
    float: left; 
    padding: 7px 0 0; 
} 
... and many more which apply to the elements inside 

プロジェクトの多くのCSSファイルがあります。 。私のカレンダーはdiv.fields内に表示されるので、上記のスタイルも同様に適用されます。上記のプロジェクトスタイルを変更することを検討しているわけではありません。

jscalendar.cssファイルのスタイル以外のスタイルに影響を与えないようにする適切な方法は何ですか？ jscalendar.cssのスタイルに重要な！を適用し、プロジェクトcssによってのみ設定されるすべての追加属性を検索し、それらを手動で0またはnullに設定するというこのオプションがあります。

場合によっては、jscalendar.css before/afterプロジェクトのcssファイルを含めることができます。

Answer 1

他のCSSファイルの後にjscalendar.cssをロードすると、他のCSSディレクティブを上書きする必要があります。 それでも問題が解決しない場合、あなたは異なる動作をして、前のものを上書きするために他の人の後にCSSのディレクティブを追加する必要がありますdiv要素にクラスを追加することができます。残念ながらこれを行うための適切な方法はにある

div.filters div.fields div.yourClass { 
    float: none; 
    padding: 0; 
    margin: 0; 
} 

Answer 2

あなたのサイトのCSSを修正してください。 divのような要素に直接スタイルを適用することによって何をしているのかは、将来のメンテナンスや変更のための苦痛の世界につながるでしょう。

要素をできるだけ直接スタイリングするのを避け、可能な限りクラスを使用し、次にIDを使用します。クラスまたはIDがdiv.fooまたはdiv#fooの要素を使用しますが、要素は直接使用しないでください。

あなたのカレンダーCSSで重要なのは今のところ重要ですが、厄介な時代をもう一度見ているカレンダープラグインをアップグレードしたように、あなたのサイトのCSSを修正するのに費やしていました。

だから、今のヒットを取り、適切に物事を行う方法を学びました正のを見て、再び同じ過ちを二度と繰り返さない:)

Answer 3

コンテナに一意のIDを適用し、遺産を反映して、あなたのCSSを変更それから派生した...直接的なスタイリングは、あなたが行きたいところにあなたを連れて行くでしょうが、道路の後でこれを維持しなければならない場合、長期的にあなたにかかるでしょう...

私はMoin Zaman、もしあなたがこの障害にぶつかったら、今すぐ世話をしなければ再び結束することになります