CSS伪选择器：:empty vs :blank

前端时间 @Zell Liew的博客深入的介绍了CSS中伪选择器 :empty 和 :blank 相关的知识 。那么 :empty 和 :blank 究竟有什么作用，又在什么场景下使用呢？今天我们来一起看看，它们怎么使用，更应该应用在哪个场景之下呢？

使用场景

我们平时做项目的时候，时常会使用一些CSS Frameworks，比如说有名的Bootstrap，在这种情况之下，使用的一些选择器，是带有一些默认样式。有的时候元素中并没有任何内容，那么在页面上显示的效果就有点怪异。比如下面这样的一个场景，你的页面上有两个 .alert 的 div 应用，其中一个有内容，另外一个任何内容都没有（就一个空 div ）。比如：

<div class="alert alert-success">Success Alert</div>
<div class="alert alert-info"></div>

如果你的页面中引用了 bootstrap.css 的话，这个时候看到的效果将会是这样：

对于这样的效果，估计没有人能接受。那么为什么会这样呢？来看一下代码，不难发现 .alert 有一个默认的样式：

.alert {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
}

元素中主要有一个 padding ，撑大了元素容器，就算元素没有任何内容，该元素也有一定的大小。就如上面看到的效果。那么我们有没有别的方法能处理呢？毕竟很多场景我们是不好控制元素的。

既然标题提到了 :empty 和 :blank ，估计有同学想到了解决方案是不是和这两个伪元素有关呢？如果感兴趣的话，可以接着往下阅读，在介绍相应的解决方案之前，咱们先来了解一下 :empty 和 :blank 。

:empty 和 :blank

首先， :empty是什么？ :blank`又是什么？

简单的说，** :empty 和 :blank 都是CSS的伪选择器。其中 :empty 可以让你选择 空元素 。空元素是指没有任何内容的元素，甚至空格都不行。即：

<div class="alert alert-info"></div>

空元素可以有注释，只要注释填满了整个元素：

<!-- 完元素 -->
<div class="alert alert-info"><!-- 我是一个注释 --></div>

<!-- 非空元素 -->
<div class="alert alert-info"> <!-- 我是一个注释 --></div>
<div class="alert alert-info"><!-- 我是一个注释 --> </div>
<div class="alert alert-info"> <!-- 我是一个注释 --> </div>

最上面的一行代码，虽然 div 中有注释，但 <div> 和 </div> 之间没有任何内容，甚至是空格都没，那么他就是一个空元素，但下面三个 div ，虽然包含的也是注释，但是里面含有空格。所以说，这三个 div 不是空元素。

:blank 较 :empty 为灵活。它可以让你选择有空白的元素：