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>

列印頁面