0

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

不能告诉我哪里错了！

4

2 回答 2

2

顶部和底部边距不适用于内联元素。请参阅类似问题：内联元素中的边距顶部。

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

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

顺便说一句，:first-childIE 8.0 或更早版本不完全支持伪类。请参阅CSS 内容和浏览器兼容性。

于 2012-09-26T18:27:39.193 回答
2

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

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

将工作。

于 2012-09-26T18:31:08.567 回答