第一个孩子不在标签上工作答案

【问题标题】：First-child not working on a tag第一个孩子不在标签上工作
【发布时间】：2012-09-26 18:21:51
【问题描述】：

第一个子伪类选择器似乎没有任何效果。这是 CSS，然后是 HTML：

.social-block a:first-child {
     margin-bottom: 20px;
 }

 <div class="social-block">
      <a href="#" target="_blank"><img src="stylesheets/img/socialblock-facebook.png" alt="socialblock-facebook" width="300" height="125"></a>
      <a href="#" target="_blank"><img src="stylesheets/img/socialblock-twitter.png" alt="socialblock-twitter" width="300" height="125"></a>
 </div>

不知道哪里错了！

【问题讨论】：

很多浏览器不支持这样的选择器

标签： html css css-selectors

【解决方案1】：

上边距和下边距不适用于内联元素。查看类似问题：Margin top in inline element。

要为<a> 提供底部边距，您可以尝试使用display: block 使其成为块级元素。但是，这会将第二个链接推到下一行，因此您可能需要结合其他技术（例如浮动）以使两个链接并排显示。

更多关于内联元素：http://www.maxdesign.com.au/articles/inline/

顺便说一句，IE 8.0 或更早版本不完全支持:first-child 伪类。见CSS contents and browser compatibility。

【讨论】：

【解决方案2】：

首先，旧版本的浏览器不支持伪选择器。第二您在 inline 元素上使用了 margin-bottom。 Margin-bottom 是块元素的属性。

a:first-child{display:block;margin-bottom:12px;}

会起作用的。

【讨论】：