2011-11-08 14 views
2

CSS宣言がブラウザに表示されない理由はありますか?ここでこのCSS宣言はなぜ表示されませんか?

は私のCSSファイルのサンプルです:

.adv { 
color:#47463D; 
} 

.earnings { 
color:#B4FF00; 
} 

私は<font class=adv>hello</font>を行うと、それが御馳走に動作します。

<font class=earnings>hello</font>を実行すると、.earningsに指定された色がブラウザに表示されません。

ページが正しいCSSファイルにリンクされています。

+1

あなたは忘れました。収益クラスの色定義の最後に表示されます。 のどちらかが正しくないとは言えません。 – MRR0GERS

+0

1. 'font'タグはhtml4と同じように非推奨です。 2.タグを適切に閉じます。 'a'を閉じるより' font'を開きます。 – Litek

+0

FONTタグと終了タグがあります。私はあなたが助けにならない非常に無効なHTMLを持っている勘違いを持っ​​ています。 –

答えて

4

あなたのページのどこかに、.earningsthis page参照)よりも特殊性が高いスタイルがあります。 CSSはウェイトスケールで適用されるので、より高いウェイト(計算された特異性)を持つものがと思うより優先されます。が適用されます。

Firebug(firefox extension)やChromeのインスペクタのようなものを使って、のスタイルが実際にのものであるかどうかを確認するのが最善の方法です。 (私はクラス属性にセミコロンと引用符が義務だったことは覚えていないので)(ちなみにそして、CSS order is irrelevant


Examplefirebug

<style> 
    /* what you think is applied */ 
    .foo { color: red; } 

    /* What is being applied due to specificity */ 
    #bar .foo { color: green; } 
</style> 

<span class="foo">.foo</span> <!-- color is red --> 

<div id="bar"> 
    <span class="foo">#bar .foo</span> <!-- color is actually green --> 
</div> 
1

カラーラインの後にセミコロンを追加します。

.adv { 
color:#47463D; 
} 

.earnings { 
color:#B4FF00; 
} 

また、あなたが一致する終了タグと一緒に、HTMLで自分のクラスの周りに二重引用符を使用する必要があります。

<font class="earnings">hello</font> 

あなたの2番目のフォントタグはあなたの最初の内側として解析し、表示されていないなっていますアップ。

+1

セミコロンは良い習慣ですが、最後のスタイル属性の後には必要ありません –

+3

HTMLの二重引用符は必要ありません。属性値が空白以外の文字で完全に構成されている場合は、省略しても問題ありません。 –

+0

何らかの引用符を付けるのは良い方法です。 – jli

2

パラメータ値を引用符で囲んでください。また、あなたが.earningsで複数のCSSパラメータを持っている場合は、それぞれの後にセミコロンを配置する必要があり、あなたのタグが最後に

<a class="adv">hello</a> 
<font class="earnings">hello</font> 

を一致させることを確認する必要があります。

+2

xhtml –

+0

で引用符を付ける必要がありますが、一部のブラウザでは問題を軽減するのに役立ちます。特にプロパティにスペースがある場合(つまり複数のクラス) – jtfairbank

+0

は最終的なセミコロンは技術的にオプションではありませんか? – philipd

0

は、要素のインスペクタを使用しますクラス "収入"にどのような他のセレクターが関与しているかを見てみましょう。

jsfiddle問題を当てはめることができますか?

1

私はあなたがタグでフォントタグを閉じするつもりかどうかわからないんだけど、次のコードは正常に動作します:

<html> 
    <head> 
    <title>CSS Color Example</title> 
    <style type="text/css"> 
     .adv {color:red;} 
     .earnings {color:red;} 
    </style> 
    </head> 
    <body> 
    <div class=adv>hello</div> 
    <div class=earnings>hello</div> 
    </body> 
</html> 
2

ことがありませんので、CSS宣言の最後のセミコロンは、オプションでありますあなたの問題。

他のスタイルが適用されている可能性が最も高いです。CSSの優先順位のルールはちょっと変わっているかもしれません。最も一般的な障害点が高度に特異的な宣言はHTMLdog.comから

例あまり特異的であり、その後の宣言よりも優先さことである:そのスタイルシート、DIV内の任意のp要素を使用

div p { color: red; } 
    p { color: blue; } 

意志青色ではなく赤色に着色する。

本当にお勧めするのは、ブラウザ用の適切なデベロッパーツールプラグイン(FirefoxのFirebugなど)を入手し、スタイルのトレースを調べることです。それは何が上書きされているのか、何が原因であるのかを教えてくれるでしょう。

関連する問題