如果内部div为空，我希望隐藏外部div。

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是否是正确的路线。我也尝试过使用bottom：

#inter + #inter-content:empty {
    display:none;
}

- Philip

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

- SW4

---

这真是太棒了！非常感谢你。但由于某种原因，它隐藏了我页面上的所有数据标签。 - Philip

我会将这标记为答案，因为它确实正确地回答了我的问题。我只是错误地提出了我的问题。非常感谢，这真的很棒。今天你教给了我很多东西。 - Philip

Answer 2

如果你正在使用Angular，你可以写成：

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

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

- Skotnik

---

注意：ng-if 检查中不需要使用 != null。 - SW4

Answer 3

几年过去了，CSS 已经有了解决方案：

.outer-content:has(.inner-content:empty) { display: none; }

我在搜索自己的问题时，发现相关答案都没有最近更新，所以我想在这里写下来。

当然，需要考虑浏览器支持:has。

- alou

Answer 4

“隐藏空容器”问题被重定向到这里。因此，这是最简单的解决方案：

.hide-if-empty:empty { display: none !important;  }

<div class="hide-if-empty">
  <!-- if empty then hidden -->
</div>

- lonix

Answer 5

当然可以！如果你想在内部的

为空时隐藏外部的

，你可以使用CSS来实现这个效果。然而，需要注意的是，单独使用CSS无法直接根据子元素的内容选择父元素。但是我们可以通过一些方法来解决这个限制。

以下是几种可以考虑的方法：

1. 使用数据属性的伪元素（推荐）：

   • 将标签（例如："Intl:"）作为伪元素（::before或::after）应用于父级div。如果内部div不为空，则伪元素的内容可以根据数据属性进行条件性获取。
   • 这样做会给人一种父级元素没有显示内容的印象，如果没有数字存在的话。
   • 示例：

   <style>
       .inter div:not(:empty)::before {
           display: block;
           content: attr(data-label);
       }
   </style>
   
   <div class="inter telephone">
       <div data-label="Intl:">21342213</div>
   </div>
   
   <div class="inter telephone">
       <div data-label="Intl:"></div>
   </div>
   

2. 条件渲染（Angular或类似框架）：

   • 如果您使用的是Angular等框架，可以根据contact_number_international是否为null来条件性地渲染父级div。
   • 示例（假设您使用的是Angular）：

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

- David2004