隐藏空元素

简介

在本实验中，我们将探索 CSS 中的 :empty 伪类，它使我们能够选择并隐藏没有内容的元素。通过应用此技术，我们可以通过去除杂乱和空白来提高网页的整体设计和可读性。通过一系列练习，我们将学习如何有效地使用 :empty 伪类来隐藏空元素，并创建更简洁、更精致的网页。

隐藏空元素

虚拟机中已提供了 index.html 和 style.css。

要隐藏没有内容的元素，请使用 :empty 伪类。例如，如果你有以下 HTML 代码：

<p>Lorem ipsum dolor sit amet. <button></button></p>

你可以使用以下 CSS 代码来隐藏没有内容的按钮元素：

p:empty {
  display: none;
}

请点击右下角的“Go Live”以在端口 8080 上运行网络服务。然后，你可以刷新“Web 8080”标签页来预览网页。

总结

恭喜你！你已经完成了“隐藏空元素”实验。你可以在 LabEx 中练习更多实验来提升你的技能。