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

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

div.classa{
显示：无；
}
A组：第一个孩子{
显示：块！重要；
}

abc
一些内容
xyz
更多内容
校长3
另一内容

您可以这样做：

<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>

---

您可以尝试

：not

伪类-

---

请参见

代码中的问题是，您想隐藏第一个

.classa

，但第一个

。classa

不是

.content

中的第一个子项，

h3

是第一个子项

因此，作为

：not（）

伪类的替代方法，可以使用（n+2）类型的

nth

。它将选择除第一个元素外的所有类型相同的元素

div.classa:n个类型（n+2）{
显示：无；
}

abc
一些内容
xyz
更多内容
校长3
另一内容

如果您愿意，那么您唯一的选择是：

div.classa~.classa{
显示：无；
}

abc
一些内容
xyz
更多内容
校长3
另一内容

有新的CSS3

：第一种类型

适用于您的案例：

在这里结账

abc
一些内容
xyz
更多内容
校长3
另一内容
.content>div:not（：第一个孩子）{
显示：无；
}

如果我能正确理解这个问题，这里的目标是隐藏每个孩子（

h3

和

div.classa

），除了第一个

h3

和它旁边的

div.classa

）

最简单的方法是将

：第一个类型

和

~

（通用同级）选择器组合使用

div.classa:类型~*{display:none；}的第一个

abc
一些内容
xyz
更多内容
校长3
另一内容

您是想先显示“还是”准确地说出您想显示的内容。我想先显示“谢谢。有支持ie8的替代方案吗？谢谢！但这段代码似乎不起作用，即使是在firefox上——我做错什么了吗？

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

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

<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;
}

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