CSS :empty Selector

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

image

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

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

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

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

Not empty

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

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

Examples using :empty

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

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

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

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

html

Missing Email

Without Empty

image

With :empty

image

Using :empty in Alerts

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

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

html

Alert Message

Without empty

image

With :empty

image

浏览器支持

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

社区例子

我发现,处理表单空的错误信息的时候用 :empty，

不需要引用js，我可以用纯css。

你还知道其他哪些用例？

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