温馨提示×

温馨提示×

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

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

css中:empty指的是什么

发布时间:2022-03-16 11:20:36 来源:亿速云 阅读:1575 作者:小新 栏目:web开发

这篇文章给大家分享的是有关css中:empty指的是什么的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

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

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

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

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

  <div>

  文本和子节点。

  <p>这里有一些内容。</p></div><div>

  在这打字。

  </div>

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

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

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

  *:empty{

  display:none;

  }

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

  p:empty{

  display:none;

  }

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

  nava: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代码:

  <divclass="container">

  <p>

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

  </p>

  <p></p>

  <p>

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

  </p>

  <pclass="pseudo"></p>

  <p><!--这里评论--></p>

  <p><p></p>

  </div>

  css代码:

  .container{

  margin:40pxauto;

  max-width:700px;

  }

  p:empty{

  background-color:linen;

  padding:15px;

  }

  .pseudo::before{

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

  }


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

向AI问一下细节

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

AI