css - 如何仅在前面的元素可见时才有边距？

Question

我的页面上有一系列元素，后面跟着一个面包屑。通常，消息元素是空的并且不显示，但在极少数情况下，其中一个元素有内容并且可见，我希望它们的面包屑元素上有一个边距，这样它就不会与消息齐平。但是，我不想以其他方式添加边距。有没有办法纯粹用 CSS 来做到这一点？ + 运算符将添加边距，但如果未显示 div，它不会消失。

<div class="message success"></div>
<div class="message error"></div>
<div class="breadcrumb>some content</div>

.message + .breadcrumb {
  margin-top: 10px; /*always there */
}

Answer 1

严格来说，不是:CSS 没有办法根据元素的可见性来选择元素。不过，您声明前面的元素通常是空的，并且您只想在它有内容时添加边距。既然如此，那么:

/* styles the .breadcrumb with a margin-top */
.message + .breadcrumb {
    margin-top: 10px;
}
/* this rule is more specific, and so removes the margin-top if the .message
   element is truly empty (of everything, including text-nodes and white-space) */
.message:empty + .breadcrumb {
    margin-top: 0;
}

JS Fiddle demo .

如果您希望根据内容的存在来设置 .breadcrumb 的 margin-top 的样式，则以上内容仅适用于相邻的 sibling ，或两者都包含 .message 元素，这就有点棘手了。

引用资料:

• > :empty pseudo-class .