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

Question

我试图在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实现这一目标.

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

Answer 2

如果你想支持IE8,那么你唯一的选择是通用兄弟选择器:

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>

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