CSSコードは動作しますが、外部CSSファイル

Question

に入れた場合、私は、この形式の一部のHTML持って失敗します。基本的に

<ul id="foo"> 
    <li class="bar"><a href="#">Reports</a> 
     <span> 
     <a href="#" class="fooLink">First Report</a> 
     <a href="#" class="fooLink">Second Report</a> 
    </span> 
    </li> 
</ul> 

を、私が展開するメニューの[レポート]リンクをしたいですクリックすると、その下のリンクを表示するとき、側に埋め、それは次のようになります。

Reports 
    First report 
    Second report 

は、これは私のCSSコードです：

.fooLink 
{ 
    padding-left: 20%; 
    padding-top: 0px; 
    display:block; 
} 

ハウverこれは動作しません。火かき棒でリンクを調べると、display:block;行がブロックされていることがわかります。しかし、私がこれをすれば：

<a href="#" 
    style="padding-left:20%; padding-top:0px; display:block;">Second Report</a> 

それは私が望むように動作します。なぜ私はそれをCSSクラスに入れたらうまくいかないのですか？

Answer 1

style属性は常に* @Kireanとして、特異性のためにスタイルシートを介して提供スタイルを切り札を経由してCSSを適用します言及している。

あなたは、外部スタイルシートへのあなたのCSSを移動すると、それは他の定義されたスタイルと競争しなければならないことを意味

。

をあなたはあなたのスタイルセレクタよりSPを作ることができます他の定義よりもエコフィカルですが、競合するものを知る必要があります。 W3C仕様によると、あなたの.fooLinkセレクタがで捏造することができ

.fooLink

a.fooLinkが

span a.fooLinkはなど、より一層具体的である.fooLinkより具体的であるaより具体的である、など

クラス選択子（.foo .fooLink）、同数のクラスセレクタ、より多くの型セレクタ（.foo a）、または任意のセレクタrをID（#foo *）で置き換えます。セレクタは同じ要素に適用されます。

ここで警告（上記のアスタリスクが示すように）は、!importantを使用してこの動作を無効にすることができます。 !importantは、他の定義されたスタイル属性よりも優先されます。複数の宣言がある場合は、標準の特殊性規則に従って解決されます。

したがって、できるだけ具体的なスタイルを作成し、競合する可能性のある他のスタイルを編集するのが最善の解決策です。

、しかし、これらの他の定義は、（サイト全体のCSSスタイルシートまたはそのような何か）あなたのコントロールの外にある!importantを使用する場合：

.fooLink 
{ 
    padding-left: 20%; 
    padding-top: 0px; 
    display:block !important; 
} 

Answer 2

他のCSS宣言をチェックして、競合するスタイルを確認してください。Specificityに注意してください。 Firebugは実際にCSSが適用されている場所とその場所を示します。

http://jsfiddle.net/PEbRQ/

その埋め込まれたCSSのブロックではなく、外部ファイルのに（動作しているようです。