-3

私はこのフォーマットのいくつかの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;
}

ただし、これは機能しません。firebugのリンクを調べると、display:block;回線がブロックされていることがわかります。しかし、私がこれを行う場合：

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

その後、私が望むように動作します。cssクラスに入れても動作しないのはなぜですか？

4

2 に答える 2

2

特異性に細心の注意を払いながら、競合するスタイルがないか他のCSS宣言を確認してください。Firebugは、実際に適用されているCSSと、それがどこから来ているのかを教えてくれるはずです。

http://jsfiddle.net/PEbRQ/

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

于 2012-05-02T23:17:16.277 に答える
1

style@Kireanが言及しているように、属性を介してCSSを適用すると、特定性のために、スタイルシートを介して提供されるスタイルよりも常に*優先されます。

つまり、CSSを外部スタイルシートに移動すると、他の定義されたスタイルと競合する必要があります。

スタイルセレクターを他の定義よりも具体的にすることができますが、何と競合しているかを知る必要があります。

.fooLinkより具体的ですa

a.fooLinkより具体的です.fooLink

span a.fooLinkより具体的なものなど

W3C仕様によれば、.fooLinkセレクターは、より多くのクラスセレクター（.foo .fooLink）、同じ数のクラスセレクターとより多くのタイプセレクター（.foo a）、またはID（#foo *）を持つセレクターによって切り詰められる可能性があります。同じ要素。

ここで、注意点（上記のアスタリスクで示されているように）は、を使用してこの動作をオーバーライドできることです!important。 !important他の定義されたスタイル属性よりも優先されます。複数の!important宣言がある場合、それらは標準の特異性規則に従って解決されます。

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

ただし、これらの他の定義が制御できない場合（サイト全体のCSSスタイルシートなど）は、次を使用して!importantください。

.fooLink
{
    padding-left: 20%; 
    padding-top: 0px;
    display:block !important;
}
于 2012-05-02T23:33:31.077 に答える