スタイルシートはフォントサイズを変更しますが、色は変更しませんか？

Question

私はRuby on Railsアプリケーションを持っており、ブートストラップの宝石とローカルスタイルシートを使用しています。現在、ナビゲーションバーのメニュー項目はグレーで、ホバリングすると白くなります。バーの背景が白いので、それらをホバリングで黒くしたい。

多くのことを試した後、今私はもっと簡単なものを見ています：ただ一つのリンクを黒くしてください。ロードされた最後のものである地元のスタイルシートで、私が持っている、そして、

<li><%= link_to "Home", root_path, { :class => 'top_menu_item'} %></li> 

：私は、次のようなリンクにクラスを添付した

.top_menu_item { 
    font-size: 100px; 
    color: black; 
} 

これは正しくのフォントサイズを変更します私はすべてをチェックするために入れたリンクですが、色はグレーのままですか？私は構文が間違っていると推測していますが、エラーが発生するほど間違っていませんか？

Ruby on Rails内のブートストラップを使用する上での優れたリソースへのポインタは、長期的にも有効です。ありがとう。

Answer 1

あなたのリンクのスタイルは、そこにブートストラップスタイルの1つによって上書きされます。オプション：

• （スタイルチェーンを追跡するために、コンソールを使用）、ブートストラップスタイルを見つけて、それを変更
• のように、より徹底的にターゲットスタイルを指定：li a.top_menu_item { color: black; }を代わりにあなたが今持っているもので。お使いの設定に
• 使用!important、のように：私はcolor: black !importantはこれをお勧めしませんし、他のすべてが失敗したとき、あなたはそれを行うだけはずですが、時にはあなたは、ものが行わ取得する必要があります。

スタイル優先度の詳細については、hereを参照してください。

Answer 2

以下試してみてください。..

.top_menu_item { 
    font-size: 100px; 
    color: black !important; 
} 

.top_menu_item a{ 
    color: black !important; 
}