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

Question

我有两个 div 一个孩子和一个父母。孩子包含一个联系电话。如果没有联系号码，我希望父 div 不显示。我正在尝试使用:emptyCSS 语句，但我认为我使用了错误的逻辑。

#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- 选择父元素，并且如果节点包含另一个节点（无论该节点是否为空），则无法确定该节点为空。

可能解决此问题的一种方法是将标签作为伪元素应用到代码中，如果元素不为空，则其内容有条件地来自 (data) 属性。如果没有数字，这会给人一种父级不显示内容的印象。

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

.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>