CSS 选择器 :empty

简介

:empty 是一个 CSS 伪类选择器，用于匹配那些没有任何子元素或文本节点的元素。这意味着被选中的元素内部是完全空白的，没有任何内容。

使用场景

:empty 选择器在某些特定情况下非常有用，例如：

• 当需要隐藏那些没有内容的容器时。
• 在动态生成内容的应用中，当某个元素本应有内容但因某种原因为空时，可以使用该选择器来处理这种情况。

基础示例

以下是一个简单的例子，演示如何使用 :empty 选择器：

/* 隐藏所有没有内容的 div */
div:empty {
  display: none;
}

<div></div> <!-- 这个 div 将被隐藏 -->
<div>这是一个有内容的 div</div> <!-- 这个 div 不会被隐藏 -->

复杂示例

下面是一个更复杂的例子，展示如何结合其他 CSS 属性使用 :empty 选择器：

// www.javascriptcn.com code example
/* 如果列表项是空的，改变背景颜色 */
ul li:empty {
  background-color: lightgray;
}

/* 同时，给有内容的列表项设置不同的样式 */
ul li {
  padding: 10px;
  border: 1px solid #ccc;
}

<ul>
  <li></li> <!-- 背景色为浅灰色 -->
  <li>项目1</li> <!-- 有内容，应用默认样式 -->
  <li></li> <!-- 背景色为浅灰色 -->
</ul>

注意事项

• :empty 选择器会匹配那些没有子元素和文本节点的元素。如果元素内部有空格、换行符或者注释，它仍然被认为是“非空”的。
• 对于那些内容看似为空但实际上可能包含不可见字符的情况，需要特别小心。可以通过检查元素的内容来确认是否真的为空。

实际案例

假设你在开发一个博客系统，有些文章可能没有标签。你可以使用 :empty 选择器来确保这些没有标签的文章不会显示任何标签相关的 UI 元素：

.tag-list:empty {
  display: none; /* 如果 .tag-list 容器是空的，则不显示 */
}

<div class="post">
  <div class="content">这是一篇关于前端的文章。</div>
  <div class="tag-list"></div> <!-- 没有任何标签，因此不会显示 -->
</div>

总结

:empty 选择器是一个强大的工具，可以帮助你更好地控制和优化你的网页布局和样式。通过理解它的功能和使用方法，你可以创建出更加干净、高效的用户界面。