のCss - どのようにテーブルセルのCSSを無効にするために

Question

CSSの初心者の質問 - 私たちのようにその表のセルと一緒に表に対して定義された一般のCSSを持って
：1つのscenerioで

.table { 
    width: 100%; 
    margin: 1em 0 1em 0; 
    border-top: 1px solid #A3C0E8; 
    border-left: 1px solid #A3C0E8;  
} 

.table td, .table th { 
    padding: .6em; 
    border-right: 1px solid #A3C0E8; 
    border-bottom: 1px solid #A3C0E8; 
    vertical-align: middle; 
    background:#D7E8FF; 
    color:#333; 
} 

、私は、TDを上書きしたいですスタイルを使用して、表のセルテキストの前にアイコンイメージを表示することができます。 表のセルは次のように定義されている場合ので、 - 「車名&詳細」 - <td> Vehicle Name & Details </td>

私はそれはまた、テキストの前にあるアイコン画像を表示するように、この表のセルのスタイルを適用したいです。

私は、CSSファイルでこのスタイルを追加 -

.vehicle { background:url(mainFolder/img/icons/vehicle.png) no-repeat left center; } 

をして<td class="vehicle"> Vehicle Name & Details </td> とtdのために追加けど何のアイコンが表示されていません。このTDの親テーブルが<table class="table">

ある

私は何かが足りないのですか？

ありがとうございました！

Answer 1

は、（1つのクラスセレクタ）.table td（1つのクラスセレクタ+一種セレクタ）よりspecific以下です。

あなたはどちらかが必要です。

• よりspecificセレクターを（例えば.table td.vehicle）
• 均等specificセレクタ（例えばtd.vehicle）スタイルシートで後述するルール・セット内の

Answer 2

ダブルチェックでは、あなたのURLの場所が正しいことを確認します。私は最初に絶対パス（http：//site.com/mainFolder ...）を入れてから、相対パスに変更します。

.vehicle

Answer 3

は

に背景位置を交換してみてください

 background:url(mainFolder/img/icons/vehicle.png) no-repeat left top; 

イメージがロードされているかどうかを確認するために、no-repeatを繰り返してデバッグすることもできます。

はまた、私の助言uが放火犯をインストール（Firefoxを使用している場合）ので、あなたはその場でHTMLとCSSを操作することができます。

Answer 4

も、それはあなたのCSSファイルで .table tdセレクタ後に表示されることを確認してください td.vehicleにあなたのセレクタを変更し

。

また、特別なTDのスタイルをインラインで行うことができます：

<td style="background:url(mainFolder/img/icons/vehicle.png) no-repeat left center;">...</td> 

Answer 5

それが動作するはずです、画像へのルートが正しいことを確認してください。 >jsfiddle