使用CSS，如何隱藏所有子元素，但第一個無類div除外，它包含具有特定類的子元素？

Question

我有這個HTML設置：

<div class="main">
  <div>
    <div class="image"></div>
  </div>
  <div class="text"></div>
  <div class="text"></div>
  <div>
    <div class="image"></div>
  </div>
</div>

使用CSS，是否可以隱藏“ .main”的所有子元素，但第一個包含“ .image”類div的無類div除外？

Answer 1

您是否絕對需要“包含.image ”條件？ 如果是這樣，您將無法執行此操作，因為沒有父選擇器 （另請參見如何使用CSS根據頁面中另一個元素的狀態選擇一個元素？ ）。

如果保證.main每個無類子元素都包含一個.image並且保證每個具有類的子元素.main包含.image ， .image根據此假設編寫選擇器，因為您將無法基於“包含.image ”條件。 使用同級組合器排除第一個無類元素：

.main > div[class], .main > div:not([class]) ~ div:not([class]) {
  display: none;
}

但是，如果-似乎有可能-並非每個無類元素都保證包含.image或者不是每個具有類的元素都不能保證包含.image ，答案就會循環回到“純CSS不可能”。

Answer 2

是的，您可以使用此CSS選擇器:not(:first-child)

 .main div:not(:first-child) { display: none; } 

 <div class="main"> <div> <div class="image">This should be visible</div> </div> <div class="text">This should be hidden</div> <div class="text">This should be hidden</div> <div> <div class="image">This should be hidden</div> </div> </div> 

Answer 3

不要忘記使用jQuery

將所有（.c1）類賦予（.main）類的所有內部元素

的index.html

<div class="main">
  <div class="c1">
    <div class="image"></div>
  </div>
  <div class="c1 text"></div>
  <div class="c1 text"></div>
  <div class="c1">
    <div class="image"></div>
  </div>
</div>
<script>
  $(document).ready(function(){
    $('.c1').hide();
    $('.c1:first').show();
  });
</script>