• 技术文章 >web前端 >css教程

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

    云罗郡主云罗郡主2018-11-19 10:41:19转载1255
    本篇文章给大家带来的内容是关于什么是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选择器这个技术。

    以上就是对什么是empty选择器?empty选择器详解的全部介绍,如果您想了解更多有关CSS3教程,请关注PHP中文网。

    以上就是什么是empty选择器?empty选择器详解的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:lvyestudy,如有侵犯,请联系admin@php.cn删除
    上一篇:cssnot选择器是什么?not()选择器详解 下一篇:target伪类选择器是什么?css:target选择器怎么用
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• CSS教程之css选择器 、属性、值_基础教程• Lesson03_02 样式规则选择器_基础教程• 浅析jQuery事件之on()方法绑定多个选择器,多个事件_jquery• JS实现简单面向对象的颜色选择器实例_javascript技巧• 简单讲解jQuery中的子元素过滤选择器_jquery• jQuery的内容过滤选择器学习教程_jquery
    1/1

    PHP中文网