CSS - 赤いフォントからTwitterのブートストラップ

Question

私の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ファイルをインポートします。

この方法では動作しません。ブートストラップが私のカラー定義を覆い隠しているのでしょうか？

Answer 1

視覚的にこのスタイルを適用することができ、あなたのマークアップで唯一の要素が<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を使用してください。しかし、私は本当にあなたができるだけ避けなければならないと感じています。ここで

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

<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; 
} 

が良いカップルです：これはこのスタイルを持つ単一の要素である場合、ワイズ特異体重の多くを運ぶことに idを、追加することを検討CSS特異記事：

• http://css-tricks.com/specifics-on-css-specificity/
• http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

さらに、プレゼンテーションクラス名はredのようにしないようにしてください。見た目に拘束されていないより意味のあるものを使用してください。はです（例：.active-link）。

Answer 2

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

コードの何か：

.red a { 
    color: #d14; 
} 

更新：ウェズリーマーチによって与えられた答えを行きます。