CSS Empty|极客教程

CSS Empty

在CSS中，:empty 伪类用于选择没有任何子元素的元素。这个伪类可以帮助我们根据元素是否为空来应用样式。在本文中，我们将详细介绍如何使用 :empty 伪类以及一些示例代码来演示其用法。

1. 基本用法

首先，让我们看一个基本的示例，如何使用 :empty 伪类来选择空元素并应用样式：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Empty Example</title>
<style>
    .empty {
        background-color: lightblue;
        padding: 10px;
    }

    .empty:empty {
        background-color: lightcoral;
    }
</style>
</head>
<body>
<div class="empty">geek-docs.com</div>
<div class="empty"></div>
</body>
</html>

代码运行结果:

CSS Empty

在上面的示例中，我们定义了一个类名为 .empty 的元素，并为其设置了背景颜色和内边距。然后使用 :empty 伪类选择空的 .empty 元素，并将其背景颜色更改为 lightcoral。

2. 选择器优先级

当使用 :empty 伪类时，需要注意选择器的优先级。下面是一个示例，演示如何使用 :empty 伪类和其他选择器一起工作：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Empty Example</title>
<style>
    .empty {
        background-color: lightblue;
        padding: 10px;
    }

    .empty:empty {
        background-color: lightcoral;
    }

    div:not(:empty) {
        background-color: lightgreen;
    }
</style>
</head>
<body>
<div class="empty">geek-docs.com</div>
<div class="empty"></div>
<div>geek-docs.com</div>
</body>
</html>

代码运行结果:

CSS Empty

在上面的示例中，我们定义了一个 div:not(:empty) 选择器，用于选择非空的 div 元素并将其背景颜色更改为 lightgreen。这样，我们可以看到不同选择器之间的优先级关系。

3. 与其他伪类结合使用

:empty 伪类可以与其他伪类一起使用，以实现更复杂的效果。下面是一个示例，演示如何将 :empty 伪类与 :hover 伪类结合使用：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Empty Example</title>
<style>
    .empty {
        background-color: lightblue;
        padding: 10px;
    }

    .empty:empty {
        background-color: lightcoral;
    }

    .empty:hover {
        background-color: lightyellow;
    }
</style>
</head>
<body>
<div class="empty">geek-docs.com</div>
<div class="empty"></div>
</body>
</html>

代码运行结果:

CSS Empty

在上面的示例中，我们定义了一个 .empty:hover 选择器，用于选择鼠标悬停在空的 .empty 元素上时，并将其背景颜色更改为 lightyellow。

4. 与伪元素结合使用

除了与其他伪类结合使用，:empty 伪类还可以与伪元素一起使用。下面是一个示例，演示如何将 :empty 伪类与 ::before 伪元素结合使用：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Empty Example</title>
<style>
    .empty {
        background-color: lightblue;
        padding: 10px;
    }

    .empty:empty {
        background-color: lightcoral;
    }

    .empty::before {
        content: "Empty Element";
        color: white;
        background-color: lightcoral;
        padding: 5px;
    }
</style>
</head>
<body>
<div class="empty">geek-docs.com</div>
<div class="empty"></div>
</body>
</html>

代码运行结果:

CSS Empty

在上面的示例中，我们定义了一个 .empty::before 伪元素，用于在空的 .empty 元素前插入内容，并设置其样式。

5. 与JavaScript结合使用

:empty 伪类还可以与JavaScript结合使用，以实现动态效果。下面是一个示例，演示如何使用JavaScript动态添加和删除元素，并结合 :empty 伪类应用样式：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Empty Example</title>
<style>
    .empty {
        background-color: lightblue;
        padding: 10px;
    }

    .empty:empty {
        background-color: lightcoral;
    }
</style>
</head>
<body>
<div class="empty">geek-docs.com</div>
<div class="empty"></div>
<button onclick="addEmpty()">Add Empty Element</button>
<button onclick="removeEmpty()">Remove Empty Element</button>

<script>
    function addEmpty() {
        const div = document.createElement('div');
        div.className = 'empty';
        document.body.appendChild(div);
    }

    function removeEmpty() {
        const emptyDivs = document.querySelectorAll('.empty');
        if (emptyDivs.length > 0) {
            emptyDivs[emptyDivs.length - 1].remove();
        }
    }
</script>
</body>
</html>

代码运行结果:

CSS Empty