Question

第一个子伪类选择器似乎没有任何效果。这是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>

不知道我哪里出错！

Answer 1

顶部和底部边距不适用于内联元素。请参阅类似问题：Margin top in inline element。

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

有关内联元素的更多信息：http://www.maxdesign.com.au/articles/inline/

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

Answer 2

首先，旧版本的浏览器不支持伪选择器。其次您在内嵌元素上使用margin-bottom。边距底部是块元素的属性。

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

会奏效。

第一个孩子没有在标签上工作

2 个答案: