1

我的页面上有一系列元素，后跟一个面包屑。通常，消息元素是空的并且不显示，但在其中一个具有内容并且可见的极少数情况下，我希望它们在面包屑元素上留有边距，这样它就不会与消息齐平。但是，我不想添加边距。有没有办法纯粹用 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 */
}
4

2 回答 2

4

严格来说，不：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 小提琴演示。

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

参考：

于 2013-11-04T01:25:58.297 回答
0

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

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

.error:empty {
    border-bottom: none;
}
于 2013-11-04T01:39:41.103 回答