html - 仅显示第一项并使用 CSS 隐藏其余项 - 无

Question

抱歉这个可能很愚蠢的问题。

我想隐藏四个图标中的三个，只想保留第一个。问题是，它们似乎不在列表中。

尝试这样做:

.side_menu_wrapper a .social_icon li:nth-child(2) {
    display: none; }

但它什么都不做。

html 部分看起来像这样:

<a href="https://www.facebook.com/pg/..." class="social_icon"><i class="fa fa-facebook"></i></a>
<a href="" class="social_icon"><i class="fa fa-twitter"></i></a> //want this gone
<a href="" class="social_icon"><i class="fa fa-pinterest"></i></a> //want this gone 
<a href="" class="social_icon"><i class="fa fa-tumblr"></i></a> //want this gone 

有没有 css 解决方案？

谢谢!

Answer 1

a{
  display:none;
}
a:first-child{
  display: block;
}

<a href="https://www.facebook.com/pg/..." class="social_icon"><i class="fa fa-facebook">fb</i></a>
<a href="" class="social_icon"><i class="fa fa-twitter">tw</i></a> 
<a href="" class="social_icon"><i class="fa fa-pinterest">pin</i></a> 
<a href="" class="social_icon"><i class="fa fa-tumblr">tum</i></a>