仅当子 HTML 元素为空时，如何仅使用 CSS 隐藏父 HTML 元素？

Question

考虑以下情况：

<section><h1>TITLE</h1>
...
<div class="section-body">

Lorem ipsum dolor sit amet consectetur, adipisicing elit.

</div>
</section>

<section><h1>TITLE-TO-HIDE</h1>
...
<div class="section-body">
</div>
</section>

---

我的问题是如何用空子div.section-body隐藏整个<section>...</section> ？ 如果可能的话，只使用 CSS 吗？ 否则有人可以解释为什么这是不可能的和/或提供一种以任何可能的方式实现这种行为的方法吗？

Answer 1

您可以使用:has选择父元素，但它仅受 Safari 和最新的 chrome 版本（105+， CanIUse ）支持。

您可以使用:empty伪类选择一个空元素。 请注意，根据MDN或CanIUse ，您需要 div 为空且没有空格：

:empty 伪类已更改为类似于 :-moz-only-whitespace，但目前还没有浏览器支持此功能。

 .body-section{ width:100px; height:100px; border:1px solid black; margin-bottom:5px; } .body-section:empty{ display:none; }

 <div class="body-section">A</div> <div class="body-section"></div> <div class="body-section">C</div> <div class="body-section"> </div>

Answer 2

CSS 只能向下遍历，孩子永远不能将样式应用到其父/前兄弟姐妹。

因此，您最好的情况是将.section-body作为第一个孩子并隐藏每个兄弟姐妹。 它不会隐藏section

 .section-body:empty ~ * { display: none; }

 <section> <div class="section-body"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque minima repudiandae sequi ex voluptatem illo, hic tempora recusandae commodi, similique earum laudantium deleniti atque placeat nemo, aperiam ullam dicta quae. </div> <h1>This will not be hidden</h1> </section> <section> <p>Down side siblings can't be selected</p> <div class="section-body"></div> <h1>This will be hidden</h1> </section> <section> <div class="section-body"> </div> <p>Having new line is not empty</p> </section> <section> <div class="section-body"></div> <h1>This will be hidden.</h1> </section>

让我们检查一下我们的“小技巧”， .section-body:empty ~ *将选择每个具有 class section-body的:empty标签，我们可以使用~获得下一个同胞，使用*将选择所有这些。

缺点：

• 你需要改变结构
• 如果你有新的行、空格或任何东西，这不会是空的

所以更好的解决方案是使用javascript

这是简单的香草javascript解决方案

 document.querySelectorAll("section > .section-body").forEach(function (el) { if (el.textContent.trim() === '') { el.parentNode.style.display = "none"; } });

 <section> <h1>TITLE</h1> <div class="section-body"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque minima repudiandae sequi ex voluptatem illo, hic tempora recusandae commodi, similique earum laudantium deleniti atque placeat nemo, aperiam ullam dicta quae. </div> </section> <section> <h1>TITLE 2</h1> <div class="section-body"> </div> </section>

Answer 3

我会说纯CSS 可能不是实现您的目标的最佳方式。 使用适当的代码可以轻松处理这种类型的条件，而样式表方法在浏览器之间非常混乱。

我可以向您推荐一个非常简单的 Javascript 解决方案，在下面的片段中我删除了该部分，但您也可以使用.style.display="none"而不是removeChild来隐藏它。

 function checkEmpty(){ const sectionBody = document.getElementsByClassName("sectionBody"); Array.from(sectionBody).forEach((el) => { //loop on every div of the class if (el.textContent.trim() === '') //check if the div is empty { var section = el.parentElement; section.parentNode.removeChild(section); //remove parent section of the current div } }); }

 <section><h1>TITLE</h1> ... <div class="sectionBody"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque minima repudiandae sequi ex voluptatem illo, hic tempora recusandae commodi, similique earum laudantium deleniti atque placeat nemo, aperiam ullam dicta quae. </div> </section> <section><h1>TITLE-TO-HIDE</h1> ... <div class="sectionBody"> </div> </section> <br> <input type="button" onclick="checkEmpty()" value ="Remove empty section(s)">