如何仅在前面的元素可见时才有余量？

我的页面上有一系列元素，然后是面包屑。通常情况下，消息元素是空的并且不显示，但是在极少数情况下，其中一个元素具有内容并且可见，我希望它们的面包屑元素具有一个边距，因此它不会与消息冲突。但是，我不想另外添加保证金。有没有一种方法可以纯粹用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 */ 
}

来源

2013-11-04 sydneyos

是否有一个理由，为什么你不能简单地把保证金只是对消息类，然后要么仅在打印时有什么可以打印的，或者只是在空的时候设置“display：none”？ –

严格来说，no：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基于内容的任一或两者存在的.message元素，在margin-top，那么这是一个有点麻烦。

参考文献：

:empty pseudo-class。

来源

2013-11-04 01:25:58

优雅 - 谢谢！ – sydneyos

的规则已经被连接到“信息错误”元素：

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

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

来源

2013-11-04 01:39:41

如何仅在前面的元素可见时才有余量？

回答

相关问题