网站地图    收藏   

主页 > 专题教程 > css >

:empty

来源:自学PHP网    时间:2018-02-08 10:48 作者: 阅读:

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

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。

最新评论

添加评论

更多文章推荐

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论