:empty 伪类,表示没有子元素的元素。只计算元素的节点和文本(包括空格)。不考虑注释和运行指令。

例如:

<style>
.item{
  height:20px;
  margin-bottom: 10px;
  background:blue;
}
.item:empty{
  display:none;
}
        </style>
<div class="item">111</div>
<div class="item"> </div>
<div class="item"></div> 

效果如下:


前两个都显示了,只有最后一个隐藏成功!第二个中有空格导致:empty失效!

换句话说,:empty生效的前提:标签中一个空格都不能有。