Question

这是我的HTML结构：

＆＃13;

p {
  margin: 0;
  border: 1px solid;
}
small {
  display: block;
  margin-top: 40px;
  border: 1px solid #999;
}
small + span {
  display: block;
  border: 1px solid #ccc;
}

＆＃13;

<p>content</p>
<small>tags</small>
<span>edit</span>

＆＃13;

一切都很好。有时<small>元素为空。像这样：

<p>content</p>
<small></small>
<span></span>

在这种情况下，我想删除margin-top的{{1}}。

是否可以使用纯CSS ？应该指出我不想使用JS。

Answer 1

您可以尝试使用:not和:empty伪类的组合。

small:not(:empty) {
  margin-top: 40px;
}

否定CSS伪类:not(X)是一个功能符号，它将一个简单的选择器 X 作为参数。它匹配一个未由参数表示的元素。 X 不得包含另一个否定选择器。 - MDN

:empty伪类表示根本没有子元素的任何元素。仅考虑元素节点和文本（包括空格）。注释或处理指令不会影响元素是否为空。 - MDN

元素为空时如何删除上边距？

1 个答案: