隐藏空元素

CSSCSSBeginner
立即练习

This tutorial is from open-source community. Access the source code

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

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


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"]) css(("`CSS`")) -.-> css/CoreLayoutGroup(["`Core Layout`"]) css(("`CSS`")) -.-> css/IntermediateStylingGroup(["`Intermediate Styling`"]) css/BasicConceptsGroup -.-> css/selectors("`Selectors`") css/CoreLayoutGroup -.-> css/display_property("`Display Property`") css/IntermediateStylingGroup -.-> css/pseudo_classes("`Pseudo-classes`") subgraph Lab Skills css/selectors -.-> lab-35208{{"`隐藏空元素`"}} css/display_property -.-> lab-35208{{"`隐藏空元素`"}} css/pseudo_classes -.-> lab-35208{{"`隐藏空元素`"}} end

隐藏空元素

虚拟机中已提供了 index.htmlstyle.css

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

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

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

p:empty {
  display: none;
}

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

总结

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

您可能感兴趣的其他 CSS 教程