如何用CSS隐藏.main下除首个含.image的无类div外的所有子元素？

这里有两种可行的思路，先讲最贴合需求的现代CSS方案，再补充兼容旧浏览器的备选方法：

现代CSS方案（使用:has()选择器） #

我们可以先统一隐藏.main的所有直接子元素，再精准筛选出目标元素并恢复显示：

/* 第一步：隐藏.main下所有直接子元素 */
.main > * {
  display: none;
}

/* 第二步：显示第一个无类且包含.image的div子元素 */
.main > div:not([class]):has(.image):first-of-type {
  display: block;
}

代码细节解释： #

• .main > *：选中.main的所有直接子元素，用display: none统一隐藏。
• div:not([class])：专门选中没有class属性的div（也就是你说的「无类div」）。
• :has(.image)：进一步筛选出内部包含.image类元素的div。
• :first-of-type：确保只选中第一个符合前面所有条件的子元素。

⚠️ 小提示：:has()是CSS Selectors Level 4的新特性，目前Chrome 105+、Firefox 121+、Safari 15.4+都支持，但旧版浏览器（比如IE、早期Edge）不兼容。如果需要覆盖这些旧环境，可以用下面的备选方案。

兼容旧浏览器的备选方案 #

如果要适配不支持:has()的浏览器，最稳妥的方式是给目标div手动加一个专属class（比如target-wrapper），再用基础选择器控制：

修改后的HTML：

<div class="main"> 
  <div class="target-wrapper"> 
    <div class="image"></div> 
  </div> 
  <div class="text"></div> 
  <div class="text"></div> 
  <div> 
    <div class="image"></div> 
  </div> 
</div>

对应的CSS：

.main > * {
  display: none;
}

.main > .target-wrapper {
  display: block;
}

这种方法兼容性拉满，所有浏览器都能支持，唯一缺点是需要微调HTML结构。

内容的提问来源于stack exchange，提问作者Weebs