资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

css中的:empty是什么

这篇文章将为大家详细讲解有关css中的:empty是什么,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

创新互联长期为数千家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为德令哈企业提供专业的成都做网站、成都网站制作,德令哈网站改版等技术服务。拥有十载丰富建站经验和众多成功案例,为您定制开发。

首先我们来了解一下:empty是什么?有什么作用?

:empty是一个css的伪类选择器,用于选择页面中为空的元素。

如果元素没有任何子元素(节点)或文本内容,则该元素计为空。注释和处理指令不会影响元素是否为空。如:

<!-在这里评论->

会被认为是空的,进而被:empty选中,而:

文本和子节点。

这里有一些内容。

在这打字。

则不会被认为是空,因此与选择器不匹配。

选择空元素对于隐藏这些元素很有用,因为如果它们有填充,它们可能是奇怪的垂直和/或水平空白区域的原因。它对于在不再需要或有用空元素的动态环境中删除空元素也很有用。例:

/*选择并隐藏页面上的所有元素*/

*:empty{

display:none;

}

/*选择并隐藏所有空段落*/

p:empty{

display:none;

}

/*选择并隐藏所有空的菜单项*/

nava:empty{

display:none;

}

/*选择表中的空表格单元格并对其应用背景颜色*/

td:empty{

background-color:#eee;

}

说明:

1、由伪元素::before,::after生成的内容并不算作“真实”内容,即使它们存在于元素内部,也不会影响元素之间的空白。

2、元素内的空格和空子元素计为该元素内的字符信息,因此如果元素包含两个元素中的一个,则该元素不再被视为空。例如,以下两个元素不被视为空:

<!-包含一个空格->

<!-包含一个空元素->

3、由于空格被视为内容,因此打开但未关闭的元素标记也不会为空。例如:

4、如果开始标记后面紧跟另一个标记,则它再次被视为空。

内容......

5、如果一个开放标记后跟另一个未直接跟随另一个标记的开放标记,则第一个标记被认为是空的,而第二个标记则不是(因为空白)。例如:

6、自闭合元件,例如



,和等都会被认为是空的,并且将和:empty选择器匹配。

下面我们通过简单的示例来看看:empty的使用:

示例演示:把亚麻色背景应用于空段落

html代码:

测试,测试,测试,测试,测试,测试,测试,测试,测试。

测试,测试,测试,测试,测试,测试,测试,测试,测试,测试,测试,测试,测试,测试,测试,测试,测试,测试,测试,测试,测试!

css代码:

.container{

margin:40pxauto;

max-width:700px;

}

p:empty{

background-color:linen;

padding:15px;

}

.pseudo::before{

content:"::before添加内容";

}

关于“css中的:empty是什么”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


当前题目:css中的:empty是什么
网站路径:http://cdkjz.cn/article/ighsig.html
返回首页 了解更多建站资讯
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线:400-028-6601 / 大客户专线   成都:13518219792   座机:028-86922220