簡單的CSS保證金問題

Question

我有一個簡單的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水平最高。

我該如何解決？ 非常感謝！

Answer 1

添加前綴.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) 。

Answer 2

這兩個聲明都包含一個類選擇器。 由於第一個聲明還具有元素選擇器，因此它更加具體，因此具有優先權 。 有關如何計算的詳細信息，請參見CSS規范規范。（簡要說明：ID選擇器比類選擇器更具體，類選擇器比類型選擇器更具體，而選擇器更多比選擇器更少更具體。）

就您而言，您可以使用ID選擇器，因為它們優先於類選擇器：

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

#load_img { margin: 0; }

如果要避免使用ID，也可以按照@TimGreen的答案建議進行操作，並使用其他類選擇器來提高聲明的特異性。

Answer 3

請執行以下操作： <img src='loading' style="margin: 0"/>或：

    .test img{
         margin:15px;
     }

    .test img:first-child{
         margin:0px;
     }