html 的empty属性,:empty | CSS属性参考

CSS :empty伪类选择器用于匹配页面中的空元素。

:empty伪类代表没有子元素的元素。这里说的子元素，只计算元素结点及文本(包括空格)，注释、运行指令不考虑在内。例如下面的div元素是一个空元素，它会被:empty伪类选择器匹配：

而下面的

元素则不是空元素。

文本内容

段落内容

文本内容

:empty伪类可以用来隐藏无用的空元素。

当一个元素中包含有一个空格的时候，该元素不会被认为是空元素，例如：

如果一个元素中包含一个空的子元素，该元素也不会被认为是空元素。例如：

如果一个元素只有开标签，而没有闭合标签，则该元素不会被认为是空元素(因为空格被认为是内容元素)。

但是，如果开标签后面直接跟着另外一个标签的话，则开标签会被认为是空元素，例如：

文字内容...

如果一个开标签后面直接跟着另外一个开标签，则第一个开标签会被认为是空元素，而第二个开标签则不是。例如：

所有的自闭合元素，例如：

---

、
和等，都会被认为是空元素，它们都会被: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。

相关阅读