我有以下场景:
此 HTML 是动态生成并不断增长的。
<div id="messages">
<div class="message person-1">
<div class="message person-1">
<div class="message person-2">
<div class="message person-2">
<div class="message person-2">
<div class="message person-1">
...
</div>
应用正常样式我得到这个:
但是,我希望将同一个人的连续消息分组。这意味着,对于每个连续的组,当它们不是第一个或最后一个 child 时,删除连续类之间的边距,并改变第一个和最后一个 child 的边界半径。
我已经调查过了:http://www.sitepoint.com/contiguous-sibling-selector/但不确定如何让它适用于不确定长度的列表。
这可能吗?
最佳答案
在不改变 HTML 的情况下,我们可以使用 +
选择器来选择来自同一个人的连续消息。然后我们可以重叠 border-radius 来隐藏它:
.person-1 + .person-1,
.person-2 + .person-2 {
margin: -10px 5px 0;
}
完整示例
#messages {
width: 200px;
}
.message {
padding: 10px;
color: #FFF;
margin: 5px 5px 0;
width: 100px;
border-radius: 5px;
}
.person-1 {
background: green;
float: left;
clear: both;
}
.person-2 {
background: purple;
float: right;
clear: both;
}
.person-1 + .person-1,
.person-2 + .person-2 {
margin: -10px 5px 0;
}
img {
padding-top: 10px;
}
<div id="messages">
<div class="message person-1">Hello How are you?</div>
<div class="message person-2">Good thanks</div>
<div class="message person-2">and you?</div>
<div class="message person-2">:)</div>
<div class="message person-1">I'm so great!</div>
<div class="message person-2">Awesome</div>
<div class="message person-1">Yeah!</div>
<div class="message person-2">Plz Respond</div>
<div class="message person-2">Plz Respond</div>
<div class="message person-2">Plz Respond
<img src="http://www.placehold.it/100x100">
</div>
<div class="message person-2">Plz Respond</div>
<div class="message person-1">Yeah!</div>
<div class="message person-1">hi!</div>
<div class="message person-1">hi!</div>
</div>
关于html - 连续设置 CSS 样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29268427/