Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何使用纯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

如果您想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>

Answer 3

您的代码中的问题是您要先隐藏 .classa，但第一个.classa不是.content中的第一个孩子}，h3是第一个孩子。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

你可以这样做：

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

Answer 5

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

请参阅this answer

Answer 6

您的案例中有新的CSS3＆＃39; :first-of-type： Demo

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

Answer 7

如果我能正确理解问题，那么这里的目标是隐藏每个孩子（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>

Answer 8

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

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

8 个答案: