在 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
可以与插槽结合使用,为没有被填充的插槽提供默认样式或内容,从而提高组件的灵活性和可用性。