html - CSS :first-child rule

Question

HTML如下

<div class="box">
<a href="images/about_1.jpg">
    <img src="images/about_1_thumb.jpg" class="float-left">
</a>

<a href="images/about_2.jpg">
    <img src="images/about_2_thumb.jpg" class="float-left">
</a>
</div>

CSS如下

div.box img.float-left{
  float:left;
  display:inline;
}

div.box a img.float-left:first-child{
  margin-right: 5px;
}

试图让 margin-right 规则只出现在第一个 anchor 标记内的图像上。有人看到我做错了什么吗？

Answer 1

是的，只需将选择器添加到 a 标记(因为您想要父项的第一个子项上的样式)

div.box img.float-left{
  float:left;
  display:inline;
}

div.box a:first-child img.float-left{
  margin-right: 5px;
}

这是一个DEMO