css :empty 选择器

原文: CSS :empty Selector - DEV Community 👩‍💻👨‍💻

通常,我们会要给有内容的容器写样式,但是如何给没有子元素或文字内容的元素设置样式呢?很简单,使用empty选择器

<p> </p><!-- NOT empty: 注意空格 -->
<p></p><!-- YES empty: 中间什么都没有 -->
p::before {
  font-family: "FontAwesome";
  content: "\f240";
}

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

p {
  color: silver;
}

p:empty {
  color: red;
}

什么样算empty?

MDN 上面的定义是:

empty伪类表示一个元素没有子元素,子元素包括元素节点或者文字(包括空格)。注释或处理指令不影响。

empty的情况

没有空格,这就是一个空元素

<p></p>

有注释但是没有空格的,也被人为是空

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

非空的情况

带有空格(换行也是)的不算空

<p> </p>

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

带有子元素

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

使用:empty示例

用在表单的错误提示中

使用:empty当*存在*错误信息的时候,在信息前面显示❌的图标

.error:before {
  color: red;
  content: "\0274c "; /* ❌ icon */
}
<!-- 没有错误信息 -->
<div class="error"></div>

<!-- 有错误信息 -->
<div class="error">Missing Email</div>

结果:

不使用empty

使用empty

用在警告框中

.alert {
  background: pink;
  padding: 10px;
}
.alert:empty {
  display: none;
}
<div class="alert"></div>
<div class="alert">Alert Message</div>

效果:

不使用empty

使用empty

浏览器支持性

IE9及以上都支持

其他的一些用法
比如用于去掉空段落的padding;
li:empty { visibility:hidden; }
消息通知的红色圆点,没有消息就不显示;

Comments
Write a Comment