CSS :empty Selector

原文《CSS :empty Selector》
可能不准的翻译：范小饭

image

通常，我们都是为一些有内容的元素设置样式，没有任何子元素或者文本信息的元素怎么办呢？简单，你可以使用:empty选择器

<p> </p><!-- NOT empty: note the blank space -->
<p></p><!-- YES empty: nothing inbetween -->

p::before {
  font-family: "FontAwesome";
  content: "\f240";
}

p:empty::before {
  content: "\f244";
}

p {
  color: silver;
}

p:empty {
  color: red;
}

empty 是什么意思？

当我第一次遇见这个，我对这个被叫做empty的属性也有点困惑，让我们看一下MDN's的定义。

:empty css伪类表示没有任何子集的元素，子集可以是元素节点，或者文本（包括空白），注释，处理指令，但是，css内容不印象一个元素是否被认为是empty

Is empty

只要没有空白，它就是一个空元素。

<p></p>

中间的注释也被视为空元素。只要没有空白。

Not empty

空白被认为不是empty，即使是换行，也会有空白，所以不是empty，强调下这个，因为我犯过同样的错误。

<p> </p>

<p>
<!-- comment -->
</p>

有子元素的也算非空元素。

<p><span></span></p>

Examples using :empty

好的，举一些实际生活中用:empty的例子。

在表单错误提示信息中 用:empty

有一个例子让我第一次发现了:empty，当我想准备一个 ❌ 图标在我的错误信息上，但是问题是当没有错误信息的时候， ❌ 依然存在，但是没关系，我可以用:empty，当只有错误信息的时候才显示图标.
CSS

.error:before {
  color: red;
  content: "\0274c "; /* ❌ icon */
}

html

<!-- No error message -->
<div class="error"></div>

<!-- Yes error message -->
<div class="error">Missing Email</div>

Without Empty

image
With :empty
image

Using :empty in Alerts

另一个用 :empty去隐藏空状态的例子。
css

.alert {
  background: pink;
  padding: 10px;
}
.alert:empty {
  display: none;
}

html

<div class="alert"></div>
<div class="alert">Alert Message</div>

Without empty

image

With :empty

image

浏览器支持

这方面的支持真的很好，完全支持ie9

社区例子

我发现,处理表单空的错误信息的时候用 :empty，<div class="error"></div>不需要引用js，我可以用纯css。

你还知道其他哪些用例？

1、 空段落中移除padding
2、li:empty visibility:hidden；让一个空列表项在列表中间充当段落分隔符（无项目符号）