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