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

Question

我有两个 div，一个 child 和一个 parent 。 child 包含一个联系电话。如果没有联系电话号码，我希望父级 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 的工作方式，您无法按照您的方式执行此操作，并且您只能编写选择器来隔 ionic /后续 DOM 节点。 :empty也适用于选择没有子节点(元素或文本)的元素。

The :empty pseudo-class represents any element that has no children at all. Only element nodes and text (including whitespace) are considered.

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

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

也就是说，如果您实际上根本不想显示父级 - 单独使用 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>