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

如果您希望根据{{1中的一个或两个中的内容的存在来设置margin-top .breadcrumb的样式，上述内容仅适用于相邻兄弟姐妹。元素，然后这有点棘手。

参考文献：

:empty pseudo-class。

Answer 2

规则必须连接到“消息错误”元素：

.error {
    ...
    border-bottom: solid 1pt black;/*whatever you want*/ 
    ...
}

.error:empty {
    border-bottom: none;
}

仅当前面的元素可见时如何获得边距？

2 个答案: