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

Question

我有两个 div 一个 child 和一个 parent。 child 包含联系电话。如果没有联系电话，我希望 parent div 显示 none。我正在尝试使用 :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 的工作方式，您无法按照您接近它的方式执行此操作，并且您只能编写 select 或隔离 child/subsequent DOM节点。 :empty 也适用于 selecting 没有 child 节点（元素或文本）的元素。

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

因此，您不能使用 CSS- select 一个 parent 元素，并且您不能确定一个节点是否为空，如果它包含另一个节点（无论该节点是否为空或不）。

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

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

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

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

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

I would like to hide my outer div if inner div is empty

html

css

css-selectors