html - 简单的 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 似乎适用于我的加载图像。我认为 class 具有最高的 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/