Question

元素组由不具有类class-collapse的元素分隔。我想在class-collapse类型的第一个和最后一个之间隐藏元素。我已经尝试将:first-of-type和last-of-type与{{1}一起使用display: block;和class-collapse，但是它不起作用，olso display: none;也不起作用

class-collapse ~ class-collapse

预期结果：

<div class="class-collapse">div1</div>
<div class="class-collapse">div2</div>
<div class="class-collapse">div3</div>
<div class="other-class">div4</div>
<div class="other-class">div5</div>
<div class="class-collapse">div6</div>
<div class="class-collapse">div7</div>
<div class="class-collapse">div8</div>
<div class="class-collapse">div9</div>
<div class="other-class">div10</div>
<div class="class-collapse">div11</div>
<div class="class-collapse">div12</div>
<div class="class-collapse">div13</div>
<div class="class-collapse">div14</div>

如何在CSS中实现此结果？

Answer 1

为什么不将另一个类添加到第一个和最后一个元素，如下所示。

div.do-not-hide{

  display: block;
}

.class-collapse {

  display: none;
}

<div class="class-collapse do-not-hide">div1</div>
<div class="class-collapse">div2</div>
<div class="class-collapse do-not-hide">div3</div>
<div class="other-class">div4</div>
<div class="other-class">div5</div>
<div class="class-collapse do-not-hide">div6</div>
<div class="class-collapse">div7</div>
<div class="class-collapse">div8</div>
<div class="class-collapse do-not-hide">div9</div>
<div class="other-class">div10</div>
<div class="class-collapse do-not-hide">div11</div>
<div class="class-collapse">div12</div>
<div class="class-collapse">div13</div>
<div class="class-collapse do-not-hide">div14</div>

如何使用同一类之间的CSS隐藏元素

1 个答案: