2

私はブートストラップを使用していますが、いくつかの色 (ナビゲーションバーとボタン) を変更したかったのです。変更されていないbootstrap.cssと、デフォルトから変更したいすべてのプロパティを変更するcustom.cssがあります。

私の index.html では、デフォルトのブートストラップをリンクしてから、カスタム css ファイルをリンクします。

<link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="bootstrap/css/custom.css" rel="stylesheet" type="text/css"/>

私は Web のことは初めてですが、スタイル シートはリンクされている順序で互いに追加されることを理解しています。しかし、ブラウザーで開くと、custom.css で指定された変更は使用されません。私の理解は間違っていますか、それとも単に間違っているのでしょうか?

編集: オリジナルの navbar-inner (bootstrap.css)

.navbar-inner {
  min-height: 40px;
  padding-right: 20px;
  padding-left: 20px;
  background-color: #fafafa; /* #fafafa */ 
  background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2); /*#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);
}

custom.css でいくつかのプロパティが変更された navbar-inner

.navbar-inner {
  background-image: -moz-linear-gradient(top, #002f6c, #002f64);
  background-image: -ms-linear-gradient(top, #002f6c, #002f64);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#002f6c), to(#002f64));
  background-image: -webkit-linear-gradient(top, #002f6c, #002f64);
  background-image: -o-linear-gradient(top, #002f6c, #002f64);
  background-image: linear-gradient(top, #002f6c, #002f64);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#'002f6c, endColorstr='#'002f64, GradientType=0);
}

HTML

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="brand" href="#">Test</a>
      <ul class="nav pull-right">
        <li class="pull-right"><a href="about.html">About</a></li>
        <li class="pull-right"><a href="contact.html">Contact</a></li>
      </ul>
    </div>
  </div>
</div>

最初の div クラスも変更する必要がありますか? (そうではない)

このツールを使用して custom.css ファイルを生成しました。

4

2 に答える 2

2

CSS スタイルが適用された順序でスタックされると言うのは、必ずしも正しいものではありません。CSS は、重要性または特異性の順に適用されます。

たとえば、次の HTML を考えてみましょう。

<ul id="testList">
    <li>Some data</li>
</ul>

最初のファイルに CSS がある場合:

ul#testList { color: #f00; }

2番目のファイルには次のものがあります：

ul { color: #00f; }

そうすれば、2 番目のファイルがマークアップの 2 番目に来る場合でも、最初のファイルの方が具体的になります。最初のスタイルは、宣言がより正確です。

ただし、2 番目のスタイルを変更して特定性を一致させると、2 番目の宣言が最初の宣言をオーバーライドします。お役に立てれば！

于 2013-07-30T12:34:10.753 に答える
0

編集：

私が使用したツールは、必要なすべてのプロパティを変更するわけではないことがわかりました! .navbar-inverse クラスも変更されているはずです。そこに変更を適用すると、期待どおりに機能します。

つまり、両方のファイルが正しくリンクされました。

答えてくれてありがとう！私は確かにいくつかの新しいことを学びました。

于 2013-07-30T13:34:04.377 に答える