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

What is empty selector? Detailed explanation of empty selector

云罗郡主
Release: 2018-11-19 10:41:19
forward
3095 people have browsed it

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>
Copy after login

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!

source:lvyestudy.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template