什么是empty选择器?empty选择器详解

2020-07-23 14:21:59
本篇文章给大家带来的内容是关于什么是empty选择器?empty选择器详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

在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>

效果如下:

微信截图_20181119103930.png

分析:

在网页表格中,对于内容为空的单元格往往设置不同的颜色,使得用户体验更好。网页版的HTML5游戏2048也用到了:empty选择器这个技术。