CSS：第一胎规则

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;
}

尝试将边距权限规则仅显示在第一个锚标记内的图像上。有人看到我做错了吗？

Answer 1

是的，只需将选择器添加到a标记（因为您希望样式位于父级的第一个子级上）

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

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

这是DEMO

Answer 2

您对第一个孩子的css调用应位于最高共享标记（在本例中为a标记），而不是最高共享的嵌套元素。