如何仅用CSS在div1仅含一个子元素时隐藏div2？

可以实现，核心是利用CSS的子元素数量判断逻辑，结合选择器关联目标元素。

实现方案 #

假设你的页面结构中，.div1和.div2处于同一个父容器下（示例结构如下）：

<div class="parent">
  <div class="div1">
    <div class="child"></div> <!-- 首页仅1个该子元素，其他页面为3个 -->
  </div>
  <div class="div2">需要隐藏的内容</div>
</div>

对应的CSS代码：

/* 当.div1下只有1个.child子元素时，隐藏同级的.div2 */
.div1:has(.child:first-child:nth-last-child(1)) + .div2 {
  display: none;
}

如果需要兼容不支持:has()选择器的旧浏览器，可以借助父容器实现（前提是父容器结构稳定）：

.parent:has(.div1 > .child:first-child:nth-last-child(1)) .div2 {
  display: none;
}

原理说明 #

• .child:first-child:nth-last-child(1) 选择器的作用是：选中既是.div1第一个子元素，同时也是倒数第一个子元素的.child——这意味着.div1下只有这一个子元素。
• 结合:has()选择器，我们可以定位到满足条件的.div1，再通过兄弟选择器+选中紧随其后的.div2，设置display: none即可隐藏它。

和你之前代码的关联 #

你之前调整6个子元素宽度的代码，核心逻辑也是利用:first-child:nth-last-child(n)判断容器内子元素的数量，再作用到子元素本身。这次需求只是把判断结果的作用对象换成了同级的另一个元素，所以需要通过:has()或者父容器选择器建立关联，本质思路完全一致。

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