CSS：好玩的‘伪类’系列之——(:empty)

gavincz

于 2019-04-29 14:23:45 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： css 伪类 :empty

本文链接：https://blog.youkuaiyun.com/gavincz/article/details/89673502

16 篇文章

订阅专栏

本文详细介绍了CSS中:empty选择器的使用方法及其触发条件。:empty选择器专门用于样式修改没有任何子元素（包括文本和空格）的元素。文章通过实例展示了如何应用此选择器来改变元素的背景颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

:empty

定义：只针对没有子元素的元素进行样式修改。(子元素可以是元素节点或文本、空格；注释或处理指令都不会产生影响)。

触发条件：当当前元素不存在任何子元素（DOM节点）及空格时，可以使用:empty修改其自身样式。

兼容：IE8及8以下不支持 Opera9.5以下不支持

举个栗子

html代码：

  <div></div><!-- 我没有子节点（包括空格） -->

  <div>我是子节点（文本）</div>

  <div>
  <!-- 我前后都有空格 -->
  </div>

css代码：

div{
  width: 100px;
  height: 100px;
  background-color: #CC33FF;/* 紫色 */
  margin: 30px;
}
div:empty{
  background-color: #FFCC99; /* 肉色 */ 
}

效果图：