CSS - :empty伪类

CSS 伪类选择器:empty表示一个为空且没有子元素的元素。

一个元素可以被称为空

如果它的标签之间没有任何内容。例如：<div></div>
如果一个元素包含代码注释。例如：<div></div>
如果元素的 CSS 生成了内容，例如来自伪元素，如::before或::after。例如：div::before {content: "Empty element"}
自闭合元素，如<br />、<hr />和<img />也被认为是空的。

语法

:empty {
   /* ... */
}

可访问性问题：空的交互式内容无法被辅助技术（如屏幕阅读器）解析。因此，所有交互式内容都必须具有可访问的名称，可以通过交互式控件父元素的文本值提供；这反过来又使其可供辅助技术访问。

CSS :empty 示例

这是一个:empty伪类的示例，应用于<p>标签

<html>
<head>
<style>
   p:empty {
      width: 200px;
      height: 30px;
      background: magenta;
   }
   div {
      border: 3px solid black;
      width: 300px;
      text-align: center;
   }
</style>
</head>
<body>
   <h2>:empty example</h2>
   <div>
   <p>Not an empty paragraph</p>
   <p></p>
   <p>Not an empty paragraph</p>
   </div>
</body>
</html>

这是一个:empty伪类的示例，应用于<div>标签

<html>
<head>
<style>
   #circle {
      background-color: red;
      height: 100px;
      width: 100px;
      border-radius: 50%;
   }

   #circle:empty {
      background-color: yellow;
   }

   div {
      display: inline-block;
      color: black;
   }
</style>
</head>
<body>
   <div id="circle"><!-- Yellow circle --></div>
   <div id="circle"><!-- not an empty element-->
      <h2>:empty</h2>
   </div>
   <div id="circle">
   <p>
      <!-- Non-collapsible whitespace and elements around this comment. -->
   </p>
   </div>
</body>
</html>

打印页面