如何用CSS在父元素A包含子元素C时为无关元素D设置样式

问题场景 #

现有HTML结构：

<div class='A'>
    <div class='B'></div>
    <div class='C'></div>
</div>

<div class='D'></div>

需求：当.A内部包含.C元素时，给.D添加外边距（.C可能不存在）。

CSS原生方案（推荐） #

使用CSS的:has()伪类实现，这是目前最简洁的原生解决方案：

/* 当.A包含.C时，为其后相邻的.D添加上边距 */
.A:has(.C) + .D {
  margin-top: 20px; /* 可根据需求修改外边距数值 */
}

选择器说明 #

• .A:has(.C)：匹配所有包含.C子元素的.A容器
• + .D：匹配紧跟在目标.A之后的相邻.D元素
• 若.A中不存在.C，该样式自动不生效，完全符合需求

兼容旧版浏览器的JS方案 #

如果需要兼容不支持:has()的旧版浏览器（如Firefox 120及以下），可以用JS辅助实现：

// 遍历所有.A容器
document.querySelectorAll('.A').forEach(container => {
  // 检查容器内是否存在.C
  if (container.querySelector('.C')) {
    // 获取相邻的下一个元素
    const nextEl = container.nextElementSibling;
    // 确认下一个元素是.D后添加样式
    if (nextEl?.classList.contains('D')) {
      nextEl.style.marginTop = '20px';
    }
  }
});

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