html - 第一个 child 不在标签上工作

Question

first-child 伪类选择器似乎没有任何作用。这是 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 使其成为 block 级元素.但是，这会将第二个链接推到下一行，因此您可能必须采用其他技术(例如 float )才能使两个链接并排显示。

关于行内元素的更多信息:http://www.maxdesign.com.au/articles/inline/

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