简单的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>

MY 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)。

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

Answer 2

两个声明都包含一个类选择器。由于第一个声明也有一个元素选择器，因此它更具体，因此优先于。有关如何计算的详细信息，请参阅CSS Specificity specification（简要说明：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;
     }