在CSS3中,:empty選擇器用於選擇一個不包含任何子元素或內容的元素。也就是選擇一個內容為空白的元素。
舉例:
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 :empty選擇器</title>
<style type="text/css">
table,tr,td
{
border:1px solid silver;
}
td
{
width:60px;
height:60px;
line-height:60px;
text-align:center;
background-color: #FFA722;
}
td:empty
{
background-color:red;
}
</style>
</head>
<body>
<table>
<tr>
<td>2</td>
<td>4</td>
<td>8</td>
</tr>
<tr>
<td>16</td>
<td>32</td>
<td>64</td>
</tr>
<tr>
<td>128</td>
<td>256</td>
<td></td>
</tr>
</table>
</body>
</html>
在浏覽器預覽效果如下:
分析:
在網頁表格中,對於內容為空的單元格往往設置不同的顏色,使得用戶體驗更好。網頁版的HTML5游戲2048也用到了:empty選擇器這個技術。