元素必須符合的條件：有空的內容，不含子元素或文字。
- 風格用法：
<style type='text/css'>
.blk SPAN:empty {display:block;
width:150px; height:150px;
background:blue;
}
</style>
<div class=blk>
<span></span>
<span>好玩遊戲，射擊遊戲，賽車遊戲，益智遊戲。</span>
</div> - 執行結果：
好玩遊戲，射擊遊戲，賽車遊戲，益智遊戲。
- IE6 失敗；Firefox, Safari, Chrome 都成功。
可以配合 :before，:after，content 加上新的內容。
- 風格用法：
<style type='text/css'>
.cls I:empty:before {content:'新增文字'; color:red}
</style>
<div class=cls>
<i></i> /
<i><!--註解--></i> /
<i>原有文字</i> /
<i>
</i> /
<i> </i>
</div> - 執行結果：
/ / 原有文字 / /
- IE6 失敗；Firefox, Safari, Chrome 都成功。上例中，跳行與空白字母，都不符合 :empty。
:HOVER, :ACTIVE 的應用。使用時要注意，在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。
- 風格用法：
<style type='text/css'>
.hvr {border:solid 1px red}
.hvr:hover TD:empty:after
{content:'空格'; color:red}
.hvr:active TD:empty:after
{background:blue}
</style>
<table class=hvr>
<tr><td>好玩遊戲<td>
<tr><td><td>射擊遊戲
</table> - 執行結果：
好玩遊戲 射擊遊戲
CSS hack：選擇器如果設為 BODY:empty，而 BODY 有內容時（BODY 通常都有內容），大部分瀏覽器都會解讀為錯誤，可是 Firefox 1.5, 2.0 會成功解讀；所以被設計師用來分別 Firefox 的不同版本。下面的範例依循兩個原則：（一）後宣告的值會蓋過先宣告的值。（二）解讀失敗的宣告會被忽略。
- 風格用法：
<style type='text/css'>
DIV.cls1 {color:blue} /* Firefox 3.0 */
BODY:empty DIV.cls1 {color:red} /* Firefox 1.5 2.0 */
</style>
<div class=cls1>
CSS hack：此段文字在多數瀏覽器是藍色；在 Firefox 1.5 2.0 是紅色。
</div> - 執行結果：
CSS hack：此段文字在多數瀏覽器是藍色；在 Firefox 1.5 2.0 是紅色。
