1

わかりました、これは非常に単純化されていますが、私は人々が Web ページを開発するのを助けるための JavaScript アプリケーションを持っています。開発中のページにインターフェースが重ねられており、1 つのことを除けば、すべて正常に動作します。

インターフェイスで使用されている div クラスが開発中の Web ページで使用されている場合、インターフェイスの埋め込みスタイルシートが Web ページのプロパティをオーバーライドします。

これは jsfiddle で発生し、埋め込まれた css が外部 css よりも優先されます。

JSfIDDLE

外部CSS:

.color {
    color: green;
}

インデックス.html:

 <style> 
    .color {
       color: blue;
    }
</style>
<div class="color"> Text to be coloured </div>

実行すると、テキストは青色になります。誰かがテキストを緑色に変えることができれば、問題を克服する方法を示していると思います.

明らかに、これを修正する 1 つの方法は、インターフェイス クラスとルールを次のように変更することです。

<style> 
  .color_interface {
     color: blue;
   }
</style>
<div class="color_interface"> Text to be coloured </div>

そしてそれらをユニークにしますが、プロジェクトには何百ものCSSルールがあり、CSSルールを無効にするためのより良い方法とより安全な方法(誰かがルール「color_interface」を持っている可能性はまだ少しあります)があるかどうか疑問に思っています。ページを汚染しないようにします。

それを行う唯一の方法は、おそらく私のルールに関する「リセット」スタイルシートであり、それらをすべてデフォルトに戻すことだと考えています。おそらくjqueryでこれを動的に行う方法はありますか？

4

3 に答える 3

2

あなたが目撃しているのは、設計による CSS です。具体的には、特異性。

公に使用できるある種のライブラリをリリースすることが目標であり、名前の競合を避けたい場合は、セレクターの名前を単純に付けるのが公正な方法だと思います.starkers-color { color: blue; }。それは必ずしも特異性の問題を回避するわけではありませんが、セレクターが実装者によってオーバーライドされるのを防ぐ必要があります。

于 2013-08-20T12:10:09.950 に答える