伪类 :empty 的应用与实践

在 CSS 中，伪类是一种强大的工具，它能够让我们根据元素的特定状态来应用样式。:empty 伪类是其中一种，它能够匹配没有子元素的元素。本文详细介绍 :empty 伪类的概念、用法，以及在前端框架如 Vue 和 Angular 中，如何结合插槽(slot)使用 :empty 来实现默认内容的展示。

伪类 :empty 简介

:empty 伪类匹配没有任何子元素（包括文本节点、注释节点等）的元素。这使得 :empty 成为一个非常有用的工具，特别是在需要根据元素是否包含内容来动态改变样式的场景中。

基本用法

以下是一个简单的例子，展示了如何使用 :empty 伪类：

.empty-element {
  display: none;
}

<div class="empty-element"></div>
<div class="empty-element">I have content!</div>

在上面的例子中，只有第一个 <div> 元素会被匹配，因为它没有任何子元素。

匹配条件

值得注意的是，:empty 伪类不仅仅匹配空的元素，它还会匹配那些只包含空白字符（如空格、换行符等）的元素。为了确保元素真正【空】，我们可以使用 :not(:empty) 来匹配那些至少包含一个非空白字符的元素。

:empty 在 Vue 和 Angular 中的应用

现代前端框架如 Vue 和 Angular，提供了一种称为“插槽”的机制，允许我们在组件中预留一个或多个位置，这些位置可以被组件的使用者填充自定义的内容。当这些插槽没有被填充时，我们可以使用 :empty 伪类来为这些插槽提供默认样式或内容。

Vue 中的 :empty

在 Vue 中，插槽使用 <slot> 元素来定义。以下是一个 Vue 组件的例子，展示了如何使用 :empty 来为插槽提供默认内容：

<template>
  <div>
    <div class="content content-default">
        <p>这是默认内容，如果插槽没有填充内容，这段文字将显示。</p>
    </div>
    <div class="content">
        <slot></slot>
    </div>
  </div>
</template>

<style>
.content:empty {
  display: none;
}
.content-default {
  display: none;
}
.content:empty + .content-default {
  display: block;
}
</style>

在上面的代码中，如果 <slot> 没有被填充，那么默认的 <p> 标签将会显示。如果 <slot> 被填充了，那么默认的 <p> 标签将会被隐藏。

Angular 中的 :empty

在 Angular 中，插槽同样使用 <ng-content> 来定义。以下是一个 Angular 组件的例子，展示了如何使用 :empty 来为插槽提供默认样式：

// component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <div>
      <div class="content">
        <ng-content></ng-content>
      </div>
      <div class="content content-default">
        <p>这是默认内容，如果插槽没有填充内容，这段文字将显示。</p>
      </div>
    </div>
  `,
  styles: [`
    .content:empty {
      display: none;
    }

    .content:empty + .content-default {
      display: none;
    }

    .content-default {
      display: none;
    }
  `]
})
export class MyComponent {}

• .content:empty：当 .content 类的元素没有任何子元素时，将其隐藏。
• .content:empty + .content-default：如果 .content 元素为空，并且紧跟着 .content-default 类的元素，则也将其隐藏。
• .content-default：默认情况下，.content-default 类的元素是隐藏的。

兼容性

下图展示了各个浏览器对于伪类 :empty 的支持性：

下图则展示了是否将 white-space 视为空的情况：

总结

:empty 伪类是一个简单但功能强大的 CSS 工具，它可以帮助我们根据元素是否包含内容来应用样式。在 Vue 和 Angular 这样的现代前端框架中，:empty 可以与插槽结合使用，为没有被填充的插槽提供默认样式或内容，从而提高组件的灵活性和可用性。