Html 在CSS中，除了第一个包含具有特定类的子元素的无类div之外，如何隐藏所有子元素？

我有以下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，除了包含“.image”类div的第一个无类div之外，.main的所有子元素都可以隐藏吗？

是的，您可以使用此CSS选择器

：not（：first child）

.main div:not（：第一个子级）{
显示：无；
}

这应该是可见的
这应该隐藏起来
这应该隐藏起来
这应该隐藏起来

您是否绝对需要“包含

.image

”条件？如果是这样，您将无法执行此操作（另请参见）

如果

.main

的每个无类子元素都保证包含

.image

，并且每个有类的子元素都保证不包含

.image

，那么请基于此假设编写选择器，因为您将无法基于“包含

.image

”条件构造选择器。使用同级组合符排除第一个无类元素：

.main>div[class]，.main>div:not（[class]）~div:not（[class]））{
显示：无；
}

---

但是，如果——这似乎很有可能——不是每个无类元素都保证包含

.image

，或者不是每个有类的元素都保证不包含，那么答案会回到“纯CSS不可能”。

不要忘了使用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>

$（文档）.ready（函数（）{
$（'.c1'）.hide（）；
$（'.c1:first'）.show（）；
});

是的，我考虑过这个路由，但在某些情况下，包含“.image”的div可能并不总是第一个子元素，我需要第一个包含“.image”的元素才可见。