CSS：第一个孩子规则

Question

HTML is as follows

<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 is as follows

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

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

Trying to get the margin-right rule to appear only on the image inside the first anchor tag. Anybody see what I'm doing incorrectly?

Answer 1

Yes, Just add the selector to the a tag (Since you want the style on the first child of the parent)

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

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

Here is a DEMO

Answer 2

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