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

这有解决方案吗？

谢谢！

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>

Answer 2

您可以在其他选择器上使用nth-child，而不仅仅是li选择器。另外，由于.social-icon是<a>元素的一部分，因此您应删除a和.social_icon之间的空格。

nth-child接受functional notation，可用于选择除第一个以外的所有元素：

.side_menu_wrapper a.social_icon:nth-child(n + 1) {
    display: none; 
}

Answer 3

nohup /bin/ecr-refresh-token \\\u0026

隐藏所有a.social_icon { display: none; } a.social_icon:first-child { display: block; }课程并显示.social_icon

的第一个孩子

jsfiddle demo

仅显示第一个项目并使用CSS隐藏其余项目 - 无<li>

3 个答案: