CSS :empty 伪类选择器

在编写页面或是组件时，我们有时候不会考虑到如果没有内容会发生什么，会是什么样子？ 在 CSS 中有一个 :empty 的伪类，它可以让我们判断一个元素的内容是否为空。接下来我们一起来探讨一些有用的 :empty 案例和实际实例。

兼容性

它的兼容性还是不错的，主流浏览器最低也能兼容到 IE9

Figure Element

HTML 上有一个元素叫 <figure> 它提供了使用 <figcaption> 元素添加标题的能力，在有些情况下，我们希望标题保留为空，或者是这张图本身就没有标题，但这时候会让页面看起来很糟糕。那这个时候就可以使用 :empty 来隐藏它：

<figure>
    <img src="hello.jpg" />
    <figcaption></figcaption>
</figure>

figcaption {
  padding: 1em;
  background: #ccc;
}

// 如果元素为空则隐藏它
figcaption:empty {
  display: none;
}

Message

还有就是我们页面中经常会用到的一些提示消息，有时候提示消息会同时包含标题和内容，但有的时候只有标题，而标题和正文之间往往会包含一间隔，在项目中我们可能会去判断内容是否为空，如果为空则不渲染内容元素，这原本需要 JS 来操作，但现在我们使用 :empty 伪类就可以做到。

<div class="message">
  <h2>提示信息</h2>
  <p>这是提示信息内容</p>
</div>

<div class="message">
  <h2>是否确定删除?</h2>
  <p></p>
</div>

.message {
  border: 1px solid #ccc;
  background: #f5f5f5;
  border-radius: 5px;
  padding: 10px 15px;
  margin-bottom: 10px;
}

h2 {
  margin: 0;
  font-size: 18px;
}

p {
  margin: 5px 0 0;
}

p:empty {
  display: none
}

而且不仅仅可以作用于空元素的本身，还可以利用 css 选择器的能力作用于其他兄弟元素、后代元素等。比如说搭配上 :not() 或是 + 选择器可以实现只有在没有提示内容的时候才出现关闭按钮：

<div class="message">
  <h2>提示信息</h2>
  <p>这是提示信息内容</p>
  <button>关闭</button>
</div>
<div class="message">
  <h2>是否确定删除?</h2>
  <p></p>
  <button>关闭</button>
</div>

.message {border:1px solid #ccc;background:#f5f5f5;border-radius:5px;padding:10px 15px;margin-bottom:10px}
h2 {margin:0;font-size: 18px;}
p {margin: 5px 0 0}
p:empty {display:none}
button {display:none}
p:empty + button {display:block}

以上。