css 可以使用 :empty 选择器来设置完全没有子元素或文本的元素的样式：

最新推荐文章于 2025-06-29 09:09:00 发布

原创最新推荐文章于 2025-06-29 09:09:00 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

css 专栏收录该内容

75 篇文章

订阅专栏

本文介绍了如何使用`:empty`选择器在CSS中为无内容的`.box`元素设置样式，通过实例展示了如何优雅地处理页面中空白元素，提升布局控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

可以使用 :empty 选择器来设置完全没有子元素或文本的元素的样式：

<div class="wrapper">
  <div class="box"></div>
  <div class="box">白日依山尽，黄河入海流。欲穷千里目，更上一层楼。</div>
</div>
.wrapper {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  display: inline-block;
  background: #999;
  border: 1px solid #585858;
  height: 200px;
  width: 200px;
  margin-right: 15px;
}

.box:empty {
  background: #fff;
}

这也是一种方式