0

デザインの一部にブートストラップとデータ テーブルを使用しています。問題は、データ テーブルのブートストラップの css スタイルが適用されていることです。この問題はこれらのライブラリだけではないため、優先順位を付けることができる何かが存在すると思います。私のスタイルまたはライブラリのスタイル。CSS の優先度を適用する方法を誰かが知っているか、CSS スタイルをリセットする必要があります。

4

2 に答える 2

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 を試してください。

于 2013-06-26T18:58:14.623 に答える
0

はい、css リセットを使用する必要があります - 正規化を確認してください ( http://necolas.github.io/normalize.css/ )

優先順位のために、スタイルは常に以前のものを上書きします。したがって、たとえば、スタイルシートに重複したルールがあり、1 つが (たとえば) 行 50 にあり、もう 1 つが行 100 にある場合、後者が優先されます。

于 2013-06-26T16:27:54.567 に答える