CSS 伪类

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

一个元素可以称为空:

  • 如果它其标签之间没有任何内容。例如: <div></div>

  • 如果元素包含代码注释。例如: <div><!-- 一个空元素，带有注释 --></div>

  • 如果元素的 CSS 生成内容，例如从伪元素生成内容，例如: :之前或::之后。例如:div::before

  • 像 <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 例子</h2>
   <div>
      <p>不是一个空段落</p>
    <p></p>
    <p>不是一个空段落</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>
      <!-- 此评论周围的不可折叠空白和元素。-->
   </p>
   </div>
</body>
</html>