使用純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> 

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 pseudo class - https://developer.mozilla.org/en-US/docs/Web/CSS/:not

看到這個答案

Answer 6

有新的CSS3 :first-of-type你的案例的:first-of-type ： 演示

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