CSS | :empty selector

在CSS中，可以使用:empty选择器来选取没有任何子元素的元素。

语法

selector:empty {
  /* styles */
}

其中，selector代表选择器，可以是任意有效的CSS选择器。

例子

HTML

<div class="container">
  <p>This is some text.</p>
  <span></span>
</div>

CSS

.container:empty {
  border: 1px solid red;
}

解释

该CSS代码将会选取没有任何子元素的.container元素，并给它加上一个红色的边框。

注意事项

• :empty选择器不会选取包含空白符（例如空格、回车、换行）的元素。
• :empty选择器只能选取没有任何子元素的元素，无法选取没有内容但有子元素的元素。

结论

:empty选择器可以帮助我们选取没有任何子元素的元素，并对它们进行样式修改。