html标签为空时通过css3 empty伪类(:empty)来隐藏标签

秦兽兽 2018-10-11 PM 137次 0条

通过css伪类来隐藏算是最简单的方法了,但是需要注意的是,标签中必须是什么都没有才可以隐藏,哪怕是有个空格都不行,更不支持嵌套,里面不可以有子标签。

demo实例(题外话我养了一只猫,我给他起名叫demo,哈哈哈~~~)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <style>
    div {
      width: 500px;
      height: 100px;
      background-color:#666;
      margin: 100px auto;
    }
    /* 如果div是空的则隐藏div。(有空格不算为空) */
    div:empty {
      display:none;
    }
  </style>
</head>
<body>
  <!-- 此div会隐藏 -->
  <div></div>
  <!-- 有空格不算为空 -->
  <div> </div>
  <!-- 有子标签span也不算为空 -->
  <div>
    <span>子标签</span>
  </div>
</body>

最后修改:2018年10月11日 18:46 PM

标签: html / css / css3 / 隐藏标签

// ~~ * 不知道有没有人请我敷个面膜 * ~~//

非特殊说明,本博所有文章均为博主原创。

秦兽兽的头像
秦兽兽 博主大人
我想我可以的,对,我可以的。

评论啦~