使用纯 css 隐藏除第一个元素之外的所有元素答案

【问题标题】：Hide all except first child of an element using pure css使用纯 css 隐藏除第一个元素之外的所有元素
【发布时间】：2015-06-18 08:49:55
【问题描述】：

我试图在 classa 类元素的第一个孩子之后隐藏所有其他孩子。

div.classa {
    display:none;
}
div.classa:first-child {
    display:block !important;
}

<div class="content">
    <h3>abc</h3>
    <div class="classa">some content</div>
    <h3>xyz</h3>
    <div class="classa">more content</div>
    <h3>header3</h3>
    <div class="classa">another content</div>
</div>

如何使用纯 css 实现这一点。

【问题讨论】：

先显示'
'还是'
'
准确地说明你想展示的内容。
我想先显示'
'

标签： html css css-selectors

【解决方案1】：

你可以这样做：

<div class="content">
    <h3>abc</h3>
    <div class="classa">some content1</div>
    <h3>xyz</h3>
    <div class="classa">more content2</div>
    <h3>header3</h3>
    <div class="classa">another content3</div>
</div>

CSS：

.content > .classa:not(:nth-of-type(2)) {
    display:none;
}

【讨论】：

谢谢！但似乎这段代码不起作用，即使在 Firefox 上也是如此 - 我做错了什么吗？ jsfiddle.net/32vw04jg

【解决方案2】：

你可以试试:not伪类——https://developer.mozilla.org/en-US/docs/Web/CSS/:not

见this answer

【讨论】：

谢谢。支持 ie8 的任何替代方案？

【解决方案3】：

你的代码中的问题是你想隐藏第一个 .classa，但第一个.classa不是.content中的第一个孩子，h3是第一个孩子。

因此，作为:not() 伪类的替代方案，您可以使用nth-of-type(n+2)。它将选择具有相同类型的所有元素，除了第一个元素。

div.classa:nth-of-type(n+2) {
    display:none;
}

<div class="content">
    <h3>abc</h3>
    <div class="classa">some content</div>
    <h3>xyz</h3>
    <div class="classa">more content</div>
    <h3>header3</h3>
    <div class="classa">another content</div>
</div>

【讨论】：

【解决方案4】：

如果你想support IE8，那么你唯一的选择就是general sibling selector：

div.classa ~ .classa {
    display: none;
}

<div class="content">
    <h3>abc</h3>
    <div class="classa">some content</div>
    <h3>xyz</h3>
    <div class="classa">more content</div>
    <h3>header3</h3>
    <div class="classa">another content</div>
</div>

【讨论】：

【解决方案5】：

您的情况有新的 CSS3 :first-of-type： Demo

.content h3, .content div{
    display:none;
}
.content .classa:first-of-type{  
    display : block;
}

【讨论】：

【解决方案6】：

在这里查看https://jsfiddle.net/32vw04jg/1/

<div class="content">
  <div>
    <h3>abc</h3>
    <div class="classa">some content</div>
  </div>
  <div>
    <h3>xyz</h3>
    <div class="classa">more content</div>
  </div>
  <div>
    <h3>header3</h3>
    <div class="classa">another content</div>
  </div>
</div>


.content > div:not(:first-child) {
display: none;
}

【讨论】：

【解决方案7】：

.content > *{ display: none;}
.content > *:first-child{ display: block !important; }

【讨论】：

【解决方案8】：

如果我能正确理解这个问题，这里的目标是隐藏每个孩子（h3 和 div.classa），但第一个 h3 和旁边的 div.classa 除外。

实现它的最简单方法是结合使用 :first-of-type 和 ~（通用兄弟）选择器。

div.classa:first-of-type ~ * { display:none; }

<div class="content">
    <h3>abc</h3>
    <div class="classa">some content</div>
    <h3>xyz</h3>
    <div class="classa">more content</div>
    <h3>header3</h3>
    <div class="classa">another content</div>
</div>

【讨论】：

'还是''

'还是'
'