如果内部div为空，我想隐藏外部div

Question

我有两个 div，一个孩子和一个父母。孩子包含一个联系电话。如果没有联系电话号码，我希望父级 div 不显示任何联系电话号码。我正在尝试使用

:empty

CSS 语句，但我认为我使用了错误的逻辑。

#inter #inter-content:empty {
    display:none;
}

<div id="inter" class="telephone">Intl: <div id="inter-content">{{contact_number_international}}</div></div>

我也不确定 CSS 是否是正确的路线。我也尝试过使用底部：

#inter + #inter-content:empty {
    display:none;
}

Answer 1

由于 CSS 的工作原理，您无法以您正在处理的方式执行此操作，并且您只能编写选择器来隔离子/后续 DOM 节点。

:empty

也适用于选择没有子节点（元素或文本）的元素。

:empty

伪类表示任何没有子元素的元素 全部。仅元素节点和文本（包括空格） 考虑过。

因此，您无法使用 CSS 选择父元素，并且如果一个节点包含另一个节点（无论该节点是否为空），您也无法确定该节点是否为空。

解决此问题的一种方法是在代码中将标签作为伪元素应用，如果元素不为空，则其内容有条件地源自（数据）属性。如果没有数字，这会给家长留下不显示内容的印象。

也就是说，如果你实际上根本不想显示父级 - 单独使用 CSS 会遇到麻烦。看起来您正在使用角度（或类似），在这种情况下您可能需要使用逻辑检查来切换父级的可见性。

.inter div:not(:empty):before {
  display: block;
  content: attr(data-label);
}

<div class="inter" class="telephone">
  <div data-label="Intl: ">21342213</div>
</div>

<div class="inter" class="telephone">
  <div data-label="Intl: "></div>
</div>

Answer 2

如果您使用的是 Angular，您可以写

<div id="inter" class="telephone" ng-if="contact_number_international != null">
    <div id="inter-content">Intl: {{contact_number_international}}</div>
</div>

其他框架应该也有这样的功能。 （我假设你因为“{{}}”而使用某些东西）

Answer 3

快进几年，CSS 对此有一个解决方案：

.outer-content:has(.inner-content:empty) { display: none; }

我自己搜索了一下，最近没有更新相关答案，所以我想我应该把它写在这里。

当然要考虑浏览器支持

:has

Answer 4

“隐藏空容器”问题重定向至此处。所以这是最简单的解决方案：

.hide-if-empty:empty { display: none !important;  }

<div class="hide-if-empty"><!-- if empty then hidden --><div>

请注意，如果元素包含空格，则该元素不被视为空。