CSS中的:empty

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2020/03/22/CSS%E4%B8%AD%E7%9A%84-empty/

摘要

本文主要讲述了：

:empty

正文

:empty

用于设置：没有子元素的元素的样式

示例：将id=a、id=b、id=c、id=d的背景颜色设为红色

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="foo">
      <div>div</div>
      <div id="a"></div>
      <p>p</p>
      <p id="b"></p>
      <input id="c" />
      <textarea id="d"></textarea>
    </div>
    <style>
      #foo :empty {
        background-color: #f00;
      }
      #foo div {
        width: 50px;
        height: 50px;
      }
      #foo p {
        width: 50px;
        height: 50px;
      }
    </style>
  </body>
</html>