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


本文摘自PHP中文网,作者云罗郡主,侵删。

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

在CSS3中,:empty选择器用于选择一个不包含任何子元素或内容的元素。也就是选择一个内容为空白的元素。

举例:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

<!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选择器详解的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

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

更多相关阅读请进入《empty选择器》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...