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

Posted 2023-03-06

【中文标题】使用纯 css 隐藏除第一个元素之外的所有元素

【英文标题】：Hide all except first child of an element using pure 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 实现这一点。

【问题讨论】：

先显示'

准确地说明你想展示的内容。

我想先显示''

【参考方案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>