Html 使用纯 css 隐藏元素的第一个子元素以外的所有元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29598625/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hide all except first child of an element using pure css
提问by biztiger
I am trying to hide every other child after first child of classa class element.
我试图在 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>How to achieve this using pure css.
如何使用纯 css 实现这一点。
采纳答案by dfsq
If you want to support IE8, then your only option is 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>回答by Aayushi Jain
Check out here https://jsfiddle.net/32vw04jg/1/
在这里查看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;
}
回答by LinkinTED
The problem in your code is that you want to hide the first.classa, but the first .classaisn't the first child in .content, the h3is the first child.
您的代码中的问题是您想隐藏第一个.classa，但第一个.classa不是 中的第一个孩子.content，h3而是第一个孩子。
So as an alternative to the :not()pseudo class, you could use nth-of-type(n+2). It will select all elements with the same type, except the first one.
因此，作为: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>回答by Matja? Mav
You can do it like that:
你可以这样做：
<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:
css：
.content > .classa:not(:nth-of-type(2)) {
display:none;
}
回答by Marco Bernardini
You can try the :notpseudo class — https://developer.mozilla.org/en-US/docs/Web/CSS/:not
你可以试试:not伪类——https://developer.mozilla.org/en-US/docs/Web/CSS/:not
See this answer
看到这个答案
回答by stanze
回答by thetont
If I can understand correctly the question the goal here is to hide every child (h3and div.classa) with the exception of the first h3and the div.classanext to it.
如果我能正确理解这个问题，这里的目标是隐藏每个孩子（h3和div.classa），除了第一个h3和div.classa旁边的孩子。
The easiest way to accomplish it is a combination of the :first-of-typeand the ~(general siblings) selectors.
实现它的最简单方法是结合使用: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>回答by Mehedi Hasan
.content > *{ display: none;}
.content > *:first-child{ display: block !important; }
