0

単純な css の問題がありますが、現時点では理解できませんでした。

私は持っている

html

<div class='test'>
    <img src='loading' class='load'/>
    <img src='title.jpg'/>
    <img src='title.jpg'/>
    <img src='title.jpg'/>

</div>

私のCSS

.test img{
   margin:15px;
}

.load{
   margin:0;
}

読み込み中の画像にマージンがまったくないようにしたいのですが、読み込み中の画像には 15px が適用されるようです。クラスのCSSレベルは最高だと思いました。

これを解決するにはどうすればよいですか？本当にありがとう！

4

3 に答える 3

4

プレフィックス .test を追加

.test .load {
  margin: 0;
}

css セレクターのスコア.test imgは(0,0,1,1)であり、.loadは(0,0,1,0)どちらが よりも小さい(0,0,1,1)です。プレフィックスを追加することにより.test。スコアは になり(0,0,2,0)ます。

参照: http://css-tricks.com/specifics-on-css-specificity/

于 2012-10-26T00:57:20.457 に答える
3

どちらの宣言にも、1 つのクラス セレクターが含まれています。最初の宣言にも要素セレクターがあるため、より具体的で優先されます。カウント方法の詳細については、 CSS 仕様の仕様を参照してください (簡単に言うと、ID セレクターはクラス セレクターよりも具体的であり、クラス セレクターはタイプ セレクターよりも具体的であり、セレクターが多いほど、セレクターが少ないよりも具体的です)。

あなたの場合、ID セレクターを使用できます。これらはクラス セレクターよりも優先されるためです。

<img src='loading' id='load_img' />

#load_img { margin: 0; }

ID を避けたい場合は、@TimGreen の回答が示唆するようにして、追加のクラス セレクターを使用して宣言の特異性を高めることもできます。

于 2012-10-26T00:49:56.490 に答える
0

次のいずれかを行います: <img src='loading' style="margin: 0"/> または:

    .test img{
         margin:15px;
     }

    .test img:first-child{
         margin:0px;
     }
于 2012-10-26T00:49:03.370 に答える