:empt和含义及作用是什么

发布时间:2020-07-09 14:57:52 作者:Leah
来源:亿速云 阅读:574

这篇文章运用简单易懂的例子给大家介绍:empt和含义及作用是什么,代码非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

 :empty是什么?本篇文章就给大家介绍:empty的相关知识,让大家对:empty有一定的了解。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

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

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

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

< div > <! - 在这里评论 - > </ div >

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

< div >
    文本和子节点。
    < p >这里有一些内容。</ p > </ div > < div >
    在这打字。
</ div >

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

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

/ *选择并隐藏页面上的所有元素* / 
* :empty {
     display:none;
}

/ *选择并隐藏所有空段落* / 
p :empty {
     display:none;
}

/ *选择并隐藏所有空的菜单项* / 
nav  a :empty {
     display:none;
}

/ *选择表中的空表格单元格并对其应用背景颜色* / 
td :empty {
     background-color:#eee ;
}

说明:

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

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

< p >  </ p >  <! - 包含一个空格 - > 
< p > < span > </ span > </ p >  <! - 包含一个空元素 - >

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

< p >

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

< p > < p >内容...... </ p >

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

< p > < p >

6、自闭合元件,例如<hr />,<br />,和<img />等都会被认为是空的,并且将和:empty选择器匹配。

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

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

html代码:

<div class="container">
  <p>
    测试,测试,测试,测试,测试,测试,测试,测试,测试。
  </p>
  <p></p>
  <p>
    测试,测试,测试,测试,测试,测试,测试,测试,测试,测试,测试,测试,测试,测试,测试,测试,测试,测试,测试,测试,测试!
  </p>
  <p class="pseudo"></p>
  <p><!-- 这里评论 --></p>
  <p><p></p>
</div>

css代码:

.container {
  margin: 40px auto;
  max-width: 700px;
}

p:empty {
  background-color: linen;
  padding: 15px;
}

.pseudo::before {
  content: "::before添加内容";
}

效果图:

:empt和含义及作用是什么

关于:empt和含义及作用是什么就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

推荐阅读:
  1. python程序怎么运行结果
  2. free命令查看内存

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

:empty css 伪类选择器

上一篇:解决命令行mysql乱码的方法

下一篇:解决mysql全局权限账户%无法登录的方法

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》