如何在class为ca的首个div子元素为空时隐藏父级class为aa的div

你可以根据项目的兼容性需求任选以下两种方案实现：

方案1：纯CSS实现（现代浏览器适用） #

直接使用CSS的:has()伪类结合:empty选择器即可实现，代码如下：

/* 当.ca的第一个直接div子元素为空时，隐藏其父级.aa元素 */
.aa:has(.ca > div:first-child:empty) {
  display: none;
}

注意：:empty为严格匹配规则，要求元素内完全没有任何内容（包括空格、换行、文本节点、子元素）才会被判定为空。如果你的场景允许第一个div内存在空白字符，推荐使用下面的JS方案。

方案2：原生JavaScript实现（全浏览器兼容） #

如果需要兼容不支持:has()选择器的旧浏览器，或者需要更灵活的空值判定逻辑，可以用JS实现：

document.addEventListener('DOMContentLoaded', () => {
  // 遍历页面上所有.ca元素
  document.querySelectorAll('.ca').forEach(ca => {
    // 获取.ca的第一个直接div子元素
    const firstDiv = ca.querySelector(':scope > div:first-child');
    if (!firstDiv) return;
    // 判定是否为空（自动忽略空格、换行等空白字符）
    const isEmpty = firstDiv.children.length === 0 && firstDiv.textContent.trim() === '';
    if (isEmpty) {
      // 找到最近的class为aa的父元素并隐藏
      ca.closest('.aa').style.display = 'none';
    }
  })
})

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