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

【问题标题】：I would like to hide my outer div if inner div is empty如果内部 div 为空，我想隐藏外部 div
【发布时间】：2015-03-12 08:47:49
【问题描述】：

我有两个 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;
}

【问题讨论】：

标签： html css css-selectors

【解决方案1】：

由于 CSS 的工作方式，您无法以接近它的方式执行此操作，并且您只能编写选择器来隔离子/后续 DOM 节点。 :empty 也适用于选择没有子节点的元素（元素或文本）。

:empty 伪类表示在全部。只有元素节点和文本（包括空格）是考虑。

因此，您无法使用 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>

【讨论】：

这真是太棒了！非常感谢你做的这些。但由于某种原因，它隐藏了我页面上的所有数据标签。
我会将其标记为答案，因为它确实正确回答了我的问题。我只是错误地问了我的问题。非常感谢，这真是太棒了。你今天真的让我很吃力

【解决方案2】：

如果你正在使用例如角度你可以写

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

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

【讨论】：

nb。 != null 不需要 ng-if 检查