Question

我有两个孩子和一个父母。孩子包含联系电话。如果没有联系号码，我希望父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-选择父元素，如果节点包含另一个节点（无论该节点是否为空），则无法确定该节点为空。

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: