ブートストラップでスタイルを置き換える方法

ブートストラップのデフォルトのスタイルを変更する

ブートストラップを長い間使用していなかったので忘れていました自分のニーズに合わせてスタイルを変更します。

開始してすぐに新しいクラスを追加し、CSS スタイルを書き換えて元のスタイルを上書きしましたが、実際には機能しませんでした。セレクターの優先順位が考慮されていないためです。これらの質問の中には面接で聞かれることもありますが、理論と実践を結びつけることができませんでした。

私の解決策は、サブセレクターを通じて重みを増やすことです。他の人も ID を使用しているのを見ると、ID を持つセレクターを追加するのは好きではありません。

一連のセレクターとその優先順位を思い出してください。

1. css セレクター

1. タグ セレクター (body、div、p、ul、li など)

2 . クラス セレクター (例: class)

3. ID セレクター (例: id)

4. グローバル セレクター (例: * 数値)

5. 結合されたセレクター (例: .head .head_logo、2 つのセレクターはスペースバーで区切られていることに注意してください)

6. 子孫セレクター (例: #head .nav ul li 親セットから子孫セットへのセレクター)

7. グループ セレクター div、span、img {color:Red} は、同じスタイルのラベルがグループに表示されることを意味します

8. 継承セレクター (例: div p、2 つのセレクターはスペースバーで区切られていることに注意してください)

9. 疑似クラスセレクター (例: link style、pseudo-要素のクラス、4 つの異なる状態: リンク、訪問済み、アクティブ、ホバー。)

10. 文字列照合用の属性セレクター (^ $ *3 種類、それぞれ開始、終了、包含に対応) )

11. サブセレクター (例: div>p、大なり記号>>)

12.CSS 隣接兄弟セレクター (例: h1 p 、プラス記号付き)

関連する推奨事項:「bootstrap 入門チュートリアル」

2. 優先度

When スタイル宣言で ! important ルールを使用すると、そのスタイル宣言は CSS 内の他の宣言をオーバーライドします。 IE6 はこの属性をサポートしていません。

インライン スタイル シートの最大ウェイトは 1000、つまり HTML の要素タグにスタイルを追加すること、つまりインライン スタイルです。この方法はCSSの管理が難しくなるため、お勧めできません。

ID セレクターの重みは 100 で、1 つ以上の ID セレクターによって定義されます。たとえば、#id{margin:0;}id セレクターはクラス セレクターをオーバーライドします。classname{margin:3pxl}

Class クラス セレクターの重みは 10 で、1 つ以上のクラス セレクターで構成されます。 , 属性セレクターと疑似クラス セレクターの定義。たとえば、.classname{margin:3px} は div{margin:6px;}

ラベル セレクターの重みは 1 です: 1 つ以上のタイプ セレクターによって定義されます。たとえば、div{marigin:6px;} は *{margin:10px;}

ワイルドカード セレクターをオーバーライドします。*{marigin:6px;}

ブラウザのカスタマイズまたは継承の重み値は 0.1 などです。

概要の並べ替え: !重要 > インライン スタイル > ID セレクター > クラス セレクター > タグ > ワイルドカード > 継承 > ブラウザのデフォルト プロパティ

3. ! important

! important の使用は悪い習慣であり、できる限り避ける必要があります。これは、スタイル シートに固有のカスケード ルールが破られ、デバッグやバグの発見がより困難になるためです。 ! important ルールを持つ 2 つの競合する宣言が同じ要素に適用される場合、より優先される宣言が使用されます。

クエリ エクスペリエンス:

サイト全体の CSS では !重要 を使用しないでください

サイト全体または外部 CSS (参照される ExtJ や YUI など) をカバーする必要がある場合にのみ使用してください。特定のページでは ! important

を使用します。 プラグインでは ! important

を使用しないでください。 最適化するには、 ! important

の代わりにスタイル ルールの優先順位を使用して問題を解決することを検討してください。

以上がブートストラップでスタイルを置き換える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。