共计 910 个字符，预计需要花费 3 分钟才能阅读完成。
CSS :empty伪类选择器用于匹配页面中的空元素。
:empty伪类代表没有子元素的元素。这里说的子元素，只计算元素结点及文本（包括空格），注释、运行指令不考虑在内。例如下面的 div 元素是一个空元素，它会被 :empty 伪类选择器匹配：
<div><!-- 这里是注释 --></div>而下面的 <div> 元素则不是空元素。
<div>
文本内容
<p> 段落内容 </p>
</div>
<div>
文本内容
</div>:empty伪类可以用来隐藏无用的空元素。
当一个元素中包含有一个空格的时候，该元素不会被认为是空元素，例如：
<p> </p> <!-- 不是空元素，包含一个空格 -->如果一个元素中包含一个空的子元素，该元素也不会被认为是空元素。例如：
<p><span></span></p> <!-- 包含空的子元素，不是空元素 -->如果一个元素只有开标签，而没有闭合标签，则该元素不会被认为是空元素（因为空格被认为是内容元素）。
<p>但是，如果开标签后面直接跟着另外一个标签的话，则开标签会被认为是空元素，例如：
<p><p> 文字内容...</p>如果一个开标签后面直接跟着另外一个开标签，则第一个开标签会被认为是空元素，而第二个开标签则不是。例如：
<p><p>所有的自闭合元素，例如：<hr />、<br />和 <img /> 等，都会被认为是空元素，它们都会被 :empty 伪类选择器匹配。
示例代码
/* 隐藏页面中所有的空元素 */
*:empty {display: none;}
/* 隐藏页面中所有的空段落 */
p:empty {display: none;}
/* 隐藏页面中所有的空菜单项 */
nav a:empty {display: none;}
/* 选择表格中空的单元格，并为它们设置背景颜色 */
td:empty {background-color: #eee;}浏览器支持
所有的现代浏览器都支持 :empty 伪类，包括：Chrome, Firefox, Safari, Opera9.5+, Internet Explorer 9+ 以及 Android 和 iOS。
相关阅读
正文完
