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 适用于我的加载图像。我认为类具有最高的 css 水平。

我该如何解决这个问题？非常感谢！

score 4 · Accepted Answer

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

score 3 · Accepted Answer

两个声明都包含一个类选择器。由于第一个声明也有一个元素选择器，所以它更具体，因此它优先。有关如何计算的详细信息，请参阅CSS Specificity 规范（简而言之：ID 选择器比类选择器更具体，类选择器比类型选择器更具体，拥有更多选择器比拥有更少选择器更具体）。

在您的情况下，您可以使用 ID 选择器，因为它们优先于类选择器：

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

#load_img { margin: 0; }

如果您想避免使用 ID，您也可以按照@TimGreen 的回答建议进行操作，并使用额外的类选择器来增加声明的特异性。

score 0 · Accepted Answer

要么这样做： <img src='loading' style="margin: 0"/> 要么：

    .test img{
         margin:15px;
     }

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

3 回答 3