2

main.css ファイルでクラスを定義しました。

.red {
  color: #d14;
}

で、こんな使い方。

<div class="navbar">
    <div class="navbar-inner">
       <ul class="nav">
          <li class="active red">
             <a href="/admin/list"><i class="icon-leaf icon-white"></i>Admin</a>
         </li>
       </ul>
    </div>
</div>

main.css の他に、twitter ブートストラップ css ファイルもインポートします。

この方法では機能しません。Bootstrap が私の色の定義を無効にしているためですか?

4

2 に答える 2

3

このスタイルを視覚的に適用できるマークアップ内の唯一の要素は です。この<a>要素には、Twitter Bootstrap によって適用される非常に具体的な CSS ルールが多数あります。次のようなものです。

.navbar .nav .active > a,
.navbar .nav .active > a:hover {
    color:#FFFFFF;
}

スタイルを適用するには、さらに具体的なものを書く必要があります。

.navbar .navbar-inner .nav .red a {
  color: #d14;
}

デモ: http://jsfiddle.net/pYGaG/

やむを得ない場合はルール上でも構いませんが!important、極力避けたほうがいいと思います。これがこのスタイルを持つ単一の要素である場合は、それに を追加することを検討してidください。

<li class="active" id="home_link">
   <a href="/admin/list"><i class="icon-leaf icon-white"></i>Admin</a>
</li>

#home_link a {
  color: #d14;
}

http://jsfiddle.net/pYGaG/1/

CSS の特異性に関するいくつかの優れた記事を次に示します。

補足として、 のような表示クラス名は避けてくださいred。本来の見た目ではなく、本来の姿に結び付けられた、より意味のあるものを使用してください(例: .active-link)。

于 2012-05-13T22:02:38.773 に答える
0

-Tag で赤色を定義して<li>いますが、テキストがありません。テキストは<a>-Tag 内にあるため、このルールを上書きする必要があります。

次のようにコーディングします。

.red a {
    color: #d14;
}

更新: Wesley Murch の回答を参照してください。

于 2012-05-13T21:58:10.253 に答える