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；让一个空列表项在列表中间充任段落分隔符（无项目符号）