デザインの一部にブートストラップとデータ テーブルを使用しています。問題は、データ テーブルのブートストラップの css スタイルが適用されていることです。この問題はこれらのライブラリだけではないため、優先順位を付けることができる何かが存在すると思います。私のスタイルまたはライブラリのスタイル。CSS の優先度を適用する方法を誰かが知っているか、CSS スタイルをリセットする必要があります。
2 に答える
簡単な答えは次のとおりです。
使用!重要
/* In a stylesheet */
p { color:red !important }
/* In a inline-style */
<p style="color:red !important;">This text will stay red</p>
通常、ページの「後で」スタイルを適用し、セレクターの優先度を高くすると、以前に設定されたプロパティが上書きされます。
ただし、Twitter のブートストラップなどの JavaScript フレームワークを使用すると、ページが読み込まれた後に CSS スタイルを html 要素に直接適用できるため、ユーザーが行うすべての操作を置き換えることができます。使用するコードによっては、以前に定義したすべてのインライン スタイルをクリアできるものもあります。これを克服するには、変更する要素の直前にこの JQuery コードを配置します。
$('#elem').attr('style', $('#elem').attr('style') + '; ' + 'color: red !important');
さて、長い答えのために...
次の HTML の使用
<p class="MyStyle" id="MyId">
MyText
</p>
CSS スタイルは、次の 3 つのルールに従って順番に適用されます (ルール 2 がルール 1 に優先します)。
1. ルールは、ブラウザによって読み取られる順序で適用されます (上から下)。
<style type="text/css">
p { color:blue; }
p { color:red; }
</style>
/* Red wins */
インライン スタイルは最後に適用されます
<p style="color:yellow">
MyText
</p>
/* Yellow wins */
2. 最も具体的なルール セレクターが勝つ(トリッキーな部分)
特異性は、この優先度のルールの数またはセレクターを使用して計算されます: (#id,.class,element)
/* One element =1 */
p { color:blue } /* (0,0,1) =1 */
/* One class =10 */
.MyStyle { color: yellow } /* (0,1,0) =10 */
/* One Id =100 */
#MyId { color: silver } /* (1,0,0) =100 */
/* 2 elements =2 */
p a { color:red } /* (0,0,2) =2 */
/* One element and one class =11 */
p.MyStyle { color: green } /* (0,1,1) =11 */
/* 2 elements and 2 classes =22 */
div.MyOtherStyle p.MyStyle { color: black } /* (0,2,2) =22 */
/* One Id, one class and one element =111 */
p#MyId.MyStyle { color:gold } /* (1,1,1) =111 */
/* 11 elements =11 See lower to know why this does not win over 1 class (10) */
ul li ul li ul li ul li ul li ul li { color:red } /* (0,0,11)=11 */
/* Gold wins */
ID は常にクラスに優先し、クラスは要素の数に関係なく常に優先します。以下にいくつかの例を示します。
Q:/ 11 エレメントのセレクターがある場合、1 クラス (=10) に勝てますか?
R:/ 11 が 10 より大きい場合でも、優先度は常に id,class,elementです。この場合、(0,0,0) の位置ごとにもう 1 桁を使用して、スタイル全体のすべての数値を計算する必要があります。例: (1,1,1)=111 は (100,10,1)=100101 になります。したがって、11 要素は (0,0,11)=11 になり、1 クラスは (0,10,0)=100 になります。
これは、(a,b,c): (a*100, b*10, c) に対して次の計算を行うことと同じです。セレクターに 101 個を超える要素がある場合は、新しいジョブを見つけるか、(a*1000, b*100, c) を使用してください。
3. 重要なルールがすべて
!important を使用する前に、1 と 2 を試してください。
はい、css リセットを使用する必要があります - 正規化を確認してください ( http://necolas.github.io/normalize.css/ )
優先順位のために、スタイルは常に以前のものを上書きします。したがって、たとえば、スタイルシートに重複したルールがあり、1 つが (たとえば) 行 50 にあり、もう 1 つが行 100 にある場合、後者が優先されます。