:empty

:empty

元素必須符合的條件：有空的內容，不含子元素或文字。 <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>