ブートストラップドロップダウンアイテムのテキストカラーを変更する

Question

ドロップダウンメニューの要素の色を変更しようとしています。ドロップダウンは次のHTMLで行われます：

<div class="btn-group"> 
    <a class="btn">Confirm</a> 
    <a href="#" id="drop_thought" role="button" class="dropdown-toggle btn white-text" data-toggle="dropdown">v</a> 
    <ul class="dropdown-menu white-text" id="tools_drop" role="menu" aria- labelledby="drop_thought"> 
     <li><a class="btn btn-success white-text">Okay</a></li> 
     <li><a class="btn btn-warning">Unload</a></li> 
     <li><a class="btn btn-danger">Quarantine</a></li> 
     <li class="divider"></li> 
     <li><a class="btn btn-primary">Permanent</a></li> 
    </ul> 
</div> 

私は読みやすいようにIDを消去しました。

私は次のようなCSSクラスを作った：

.white-text { 
    color: #FFFFFF; !important 
} 

私は!importantが自動的にホワイトにわかりになるだろうが、それはまだ黒だと思いました。 Chromeの開発者コンソールでwhite-textの同封の<li><a>...</a></li>要素を調べたところ、.dropdown-menu aが継承しているクラスであるようです。なんらかの理由で私のwhite-textは無視され、ストライクスルーがあります。以下のCSSを使用して

は

、私は、テキストの色を白に変更することができましたが、私は別の場所にドロップダウンを使用しているので、私はこれを使用することはできません。ここで

.dropdown-menu a{ 
    color: #FFFFFF; !important 
} 

は応じ継承チェーンですChromeに：！

.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a - #ffffff 
.btn-success:hover, .btn-success:active, .btn-success.active, .btn-success.disabled, .btn-success[disabled] - #ffffff 
.btn:hover - #333333 
.btn:hover, .btn:active, .btn.active, .btn.disabled, .btn[disabled] - #333333 .dropdown-menu a - #333333 
a:hover - #005580 
.white-text - #FFFFFF 
.btn-success - #ffffff 
.btn - #333333 
a - #0088cc 
.white-text - #FFFFFF 
body - #333333 

Answer 1

セミコロンが後に行く重要な、そうでない場合は、（CSSがホワイトスペース/リターンを扱っていない）、そのプロパティには含まれません。

正しい使用：

.dropdown-menu a{ 
    color: #FFFFFF !important; 
} 

http://css-tricks.com/when-using-important-is-the-right-choice/