主页 / 问题 / 731956
Accepted
kizoso
Asked:2020-10-17 18:28:22 +0000 UTC2020-10-17 18:28:22 +0000 UTC

如何不显示带有显示的div：无内容跨浏览器

  • 772

为了不显示空 div，我使用:empty. 但是你不仅需要隐藏空的div，还需要隐藏内容被设置样式的div，display:none它只是看起来是空的，实际上里面有html代码。有没有办法隐藏这样的块？最好只有css.

div {
  display: inline-block;
  background: purple;
  color: white;
  padding: 1rem;
}
div:empty{
  display:none;
}
<br>Див:
<br><div>123</div>
<br><br>
<br>Див с пробелом:
<br><div>&nbsp;</div>
<br><br>
<br>Пустой див:
<br><div></div>
<br><br>
<br>Див с содержимим:
<br><div>
  <section>456</section>
</div>
<br><br>
<br>Див с содержимим со стилем display:none:
<br><div>
  <section style="display: none;">789</section>
</div>
<br><br>

html

1 个回答

  1. Best Answer

    仅在css理论上使用选择器:has，但浏览器还不支持它（http://caniuse.com/#feat=css-has）

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

    但是通过jQuery使用相同的选择器应该可以工作

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

相关问题