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

💠`:empty` 基本用法

語法

1
2
3

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

以下範例展示了四種情境：當 <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;
}

See the Pen empty by Lala (@bobee) on CodePen.

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

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

1
2
3

p:empty {
  display: none;
}

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

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

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。

Hahow 有各式各樣類型的課程，而且是無限次數觀看，對學生或上班族而言，不用擔心被時間綁住

如果你是初學者，非常推薦六角學院哦！
剛開始轉職也是上了六角的課，非常的淺顯易懂，最重要的是，隨時還有線上的助教幫你解決問題！

Udemy 裡的課程非常的多，品質普遍不錯，且價格都滿實惠的，CP值很高！
也是很多工程師推薦的線上課程網站。