0

ブートストラップから CSS をオーバーライドしようとしています。色のないナビゲーションバーをデザインします。

.navbar-inner {
  min-height: 40px;
  padding-right: 20px;
  padding-left: 20px;
  background-color: #fafafa;
  background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2));
  background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2);
  background-image: -o-linear-gradient(top, #ffffff, #f2f2f2);
  background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
  background-repeat: repeat-x;
  border: 1px solid #d4d4d4;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
  *zoom: 1;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
     -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
}

と

.navbar-inner {
  min-height: 40px;
  padding-right: 20px;
  padding-left: 20px;

}

ブートストラップ .css で背景色を削除して置き換えます。

それを別の値でオーバーライドすることは可能ですか?

4

1 に答える 1

7

短い答え:はい

長い回答が続きます

CSS が機能する方法は、特異性と呼ばれます。スタイルが要素に適用される順序があります。それぞれのデフォルト値が 0 の 4 つの個別の数値と考えてください。したがって、0,0,0,0 がデフォルトです。

  • 最初の数字はインライン スタイルを表します。<span style="color: red">I'm Red</span>
  • 2 番目の数字は ID を表します。#IdSelector
  • 3 番目の数字はクラスを表します。.ClassSelector
  • 4 番目の数字は要素と疑似セレクターを表しますdiv。:first-child

これらのルールは、最初に内部スタイル シート、次に外部スタイル シートの順に適用されます。要素に適用される ANYWHERE 定義されたルールがあり、より具体的なセレクターでそれをオーバーライドしない場合、それは同じままです。

以下はオーバーライドします

.navbar-inner {
    background-image: none;
}

具体性に戻ります。

あなたの要素が<div id="mainNav" class="navbar-inner"></div>

#mainNav {
    background-image: none;
}
.navbar-inner {
    background-image: url(img.png);
}

その後、画像はなしに設定されます。ID セレクターの特異性は 0,1,0,0 で、クラス セクターの特異性は 0,0,1,0 です。

11 個のクラスを追加した場合でも、ID が優先されます。その場合の特異度は 0,0,11,0 になります。

最後の数字、隠し数字があります。so 0,0,0,0,0 前のものは を表し!important、スタイル宣言の後に追加して、何があっても適用することができます。リストされている 2 つの競合する宣言がある場合!important、インライン、埋め込み、外部の順序にフォールバックします。一般に、絶対に意味がある場合を除き、!important はできるだけ避けるべきです。

!意味のある重要な例。

.hide {
    display: none !important;
}
于 2013-01-25T23:47:46.563 に答える