[CSS] The :empty Pseudo Selector Gotchas

最新推荐文章于 2024-03-20 11:03:06 发布

weixin_30752377

最新推荐文章于 2024-03-20 11:03:06 发布

阅读量152

点赞数

原文链接：http://www.cnblogs.com/Answer1215/p/11527278.html

版权

The :empty pseudo selector selects empty elements. We can use this to display useful messages instead of the empty content or hide the content completely. However, the :empty pseudo selector comes with a couple of potentially confusing behaviors when it comes to which elements it considers empty.

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <style type="text/css">
      p {
        background: rgb(255, 211, 233);
        margin-top: 10px;
        margin-bottom: 0px;
        padding: 10px;
      }
      // Be carefual that img is also considered as an empty element
      *:empty {
        display: none;
      }
    </style>
  </head>

  <body>
    <p></p>
    <p>Some content</p>
    <p></p>
    <img
      width="200px"
      height="200px"
      src="https://source.unsplash.com/user/erondu/daily"
    />
  </body>
</html>

转载于:https://www.cnblogs.com/Answer1215/p/11527278.html

优惠劵

weixin_30752377

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[CSS] The :empty Pseudo Selector Gotchas

The:emptypseudo selector selects empty elements. We can use this to display useful messages instead of the empty content or hide the content completely. However, the:emptypseudo selector come...
复制链接

扫一扫