Home > Article > Web Front-end > What is empty selector? Detailed explanation of empty selector

What is empty selector? Detailed explanation of empty selector

云罗郡主forward: 2018-11-19 10:41:193042browse

This article brings you the content about what is the empty selector? The detailed explanation of the empty selector has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

In CSS3, the :empty selector is used to select an element that does not contain any child elements or content. That is, select an element with blank content.

Example:

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

The effect is as follows:

What is empty selector? Detailed explanation of empty selector

Analysis:

In the web form, the content is empty Cells are often set to different colors to make the user experience better. The web version of the HTML5 game 2048 also uses the empty selector technology.

The above is the explanation of what is the empty selector? A complete introduction to the detailed explanation of the empty selector. If you want to know more about CSS3 tutorial, please pay attention to the PHP Chinese website.

The above is the detailed content of What is empty selector? Detailed explanation of empty selector. For more information, please follow other related articles on the PHP Chinese website!

php html5 css3 选择器

Statement：

This article is reproduced at:lvyestudy.com. If there is any infringement, please contact admin@php.cn delete

Previous article：What is the cssnot selector? Detailed explanation of the not() selectorNext article：What is the cssnot selector? Detailed explanation of the not() selector

See more

What is empty selector? Detailed explanation of empty selector

Related articles