Question

要隐藏空div，我使用伪类:empty。

我不仅需要隐藏空div，还需要隐藏具有display: none样式的子项的div。它看起来只是空的，实际上它有一个html代码。

有没有办法隐藏这样的块？

我只想使用css

div {
  display: inline-block;
  background: purple;
  color: white;
  padding: 1rem;
}
div:empty{
  display:none;
}

<br>Div:
<br><div>123</div>
<br><br>
<br>Div with a space:
<br><div>&nbsp;</div>
<br><br>
<br>Empty div (hidden, it is simple):
<br><div></div>
<br><br>
<br>Div with block:
<br><div>
  <section>456</section>
</div>
<br><br>
<br>Div with block with a style display:none(how to hide it with css use only?):
<br><div>
  <section style="display: none;">789</section>
</div>
<br><br>

Answer 1

检查它的最简单方法是jQuery所说的其他许多方法（假设display: none只是内联CSS属性：

if ($(element).prop("style")["width"] !== ''){
  $(this).parent().css("display", "none");
}

Answer 2

我找到了:has的解决方案，但它并不适用于所有浏览器（http://caniuse.com/#feat=css-has）

div:has(> section[style*="display:block"]) {
    display: none;
}

所以，我可以使用jQuery的解决方案：

$("div:has(section[style*=`display:block`]").hide()

Answer 3

也许我错过了一些东西，但为什么不用这个课呢？然后使用该类来定位要显示的任何内容：none？

div {
  display: inline-block;
  background: purple;
  color: white;
  padding: 1rem;
}
.hide {
  display:none;
}

 
<br><div class="hide">
  <section class="hide">789</section>
</div>
<br><br>

如何使用`display：none`样式隐藏div？

3 个答案: