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

: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; /* 肉色 */ 
}

效果图：

​​​​​​​