连续定型CSS

Question

我有以下场景:

这个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>

应用正常样式我得到这个:

但是,我希望由同一个人对连续的消息进行分组.这意味着,对于每个连续的组,当它们不是第一个或最后一个孩子并且还改变第一个和最后一个孩子的边界半径时,去除连续类之间的边界.

我已经调查了这个:http://www.sitepoint.com/contiguous-sibling-selector/但不知道如何让它工作以获得不确定长度的列表.

这有可能吗？

Answer 1

在不更改HTML的情况下,我们可以使用+选择器从同一个人中选择连续的消息.然后我们可以重叠边界半径来隐藏它:

.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>