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

我的页面上有一系列元素，后跟一个面包屑。通常，message元素为空并且不显示，但是在极少数情况下，其中一个元素具有内容并且可见，我希望在面包屑元素上留出一定的空白，以免与消息发生冲突。但是，我不想增加边距。有没有办法完全使用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 */
}

最佳答案

严格来说，没有：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。

上面的方法仅适用于相邻的兄弟姐妹，如果您希望根据margin-top元素中一个或两个元素的内容的存在来为.breadcrumb的.message设置样式，那会有些棘手。

参考文献：


:empty pseudo-class。