:empty | CSS-Tricks

Matt DeCamp 于 2021 年 4 月 27 日

CSS :empty 伪类选择任何对给定选择器没有包含子元素的元素。

/* Changes the background color of every empty section element */
section:empty {
  background-color: tomato;
}

如果我们在页面上运行该代码，CSS 将寻找一个不包含标签之间内容的 <section> 元素。这可能看起来像这样

<section>
  <p>I have content</p>
</section>

<section>
  <p>I have content, too!</p>
</section>

<section> // HIGHLIGHT
  <!-- No content, just an HTML comment. 🎺 -->
</section>

是什么让元素“为空”？

标签之间没有任何内容的元素为空。

<div></div>

包括如果元素包含代码注释。

<div><!--I'm still empty, even with this comment. --></div>

以及如果元素的 CSS 生成了 content（例如来自像 ::before 或 ::after 这样的伪元素），它也被认为是空的。

div::before {
  content: "Yep, still empty!;"
}

具有子元素的元素（又称“非空”元素）

如果元素包含另一个元素节点、文本甚至标签之间的文本空白，则称该元素具有“子元素”。下列代码中的元素被认为是“非空”元素。

<article>
  <h1>I'm a child of this article element.</h1>
</article>

<p>This text is considered a child.</p>

<!-- Even whitespace between tags qualifies this element as "non-empty" -->
<h1>   </h1>

但请注意！代码编辑器可能会创建不必要的空白，使原本为空的元素变为非空元素。

<section>
  <!-- The white space in this element makes it a "non-empty" element -->
</section>

现在它类似于 `:-moz-only-whitespace`s

:empty 在选择器级别 4 规范中被更新为类似于 Mozilla 的带前缀的 :moz-only-whitespace 伪类。就像 :empty 一样，:moz-only-whitespace 选择空元素。不同的是，:moz-only-whitespace 还选择仅包含文本空白的元素。该规范解释得非常好

在选择器的级别 2 和级别 3 中，:empty 不会匹配仅包含空白的元素。这已更改，因此考虑到空白在 HTML 中很大程度上是可以折叠的，因此用于源代码格式化，尤其是因为省略结束标签的元素可能会将此类空白吸收到其 DOM 文本内容中，因此作者认为为空的元素可以通过此选择器进行选择，因为他们期望如此。

所以，是的。此更改更有可能使 :empty 按预期方式工作，因此即使元素内存在某些元素（例如 <br>）或格式化的空白，它们也不会阻止元素被认为为空。

但是，目前没有对此更改的浏览器支持。