如何用CSS隐藏除首个含.image类孙元素之外的所有元素？

首先，咱们先理清你的需求：你想在.content的子元素里，只保留第一个拥有.image类孙元素的那个，其他所有子元素都隐藏。你之前写的选择器无效，是因为搞错了选择器的作用层级——.image是孙元素，不是子元素本身，所以不能直接在子元素的选择器里用:not(.image)来判断。

正确的CSS实现方案 #

现代浏览器支持的:has()伪类可以完美解决这个问题，它能检测元素是否包含指定的后代元素。具体代码如下：

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

/* 第二步：只显示第一个拥有.image后代的直接子元素 */
.content > *:has(.image):first-of-type {
  display: block;
}

为什么你的原选择器无效？ #

你写的.content > *:not([class]):not(.image):first-child存在两个核心问题：

1. 层级判断错误：.image是子元素的子元素（孙元素），而这个选择器是在判断子元素自身是否有.image类，完全没检测到后代元素的存在。
2. 逻辑冗余矛盾：:not([class])已经筛选出无class的子元素，再加上:not(.image)没有意义——这些子元素本身就没有.image类，这个条件完全多余。

兼容性说明 #

:has()伪类在Chrome 105+、Firefox 121+、Safari 15.4+都支持，如果需要兼容更老的浏览器，只能依赖HTML结构的固定性硬编码（比如你确定第一个子元素就是带.image孙元素的，直接用.content > *:first-child { display: block; }），但这种方法不够灵活，无法适配结构变化的场景。

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