如果元素中沒有任何子元素或內容(包括空白符)時，我們可以透過 :empty 選擇器來定義樣式。

💠:empty 基本用法

語法

選擇器:empty {
	屬性名: 屬性值;
}

• 用來選擇沒有內容的元素

範例

一起試試：[CODEPEN]

以下範例展示了四種情境：當 <div> 沒有內容時，它的背景會呈現黃色；若有任何內容，則背景會呈現藍色。

<!--無任何內容元素-->
<div></div>

<!--有空白符-->
<div> </div>

<!--有文字內容-->
<div>not empty</div>

<!--有其他元素-->
<div>
  <p></p>
</div>

div {
  width: 100px;
  height: 100px;
  padding: 10px;
  background-color: skyblue;
}

div:empty {
  background-color: gold;
}

在這些情境中，只有「真正沒內容」的 <div> 才呈現黃色，如有空白符或任何空的子元素也都會被視為有內容哦！

💠實務應用：隱藏沒有內容的元素

在實務中，開發者可以用 :empty 來隱藏沒有內容的元素，這樣可以避免這些元素佔據不必要的版面。例如，空的段落 <p> 會自動被隱藏：

p:empty {
  display: none;
}

這在某些內容管理系統或 WYSIWYG 編輯器中特別有用，因為使用者有時會不小心留下空的元素。透過 :empty，我們可以確保這些空白元素不會出現在最終的網頁上，保持介面簡潔。

💠總結

:empty 選擇器是用來處理沒有任何內容的元素，特別適合用來篩選和隱藏不必要的標籤，從而保持版面整潔。然而，對於有空白符或其他子元素的情況，:empty 並不會選中它們，這在應用時需要特別留意。