html - 连续设置 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>

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

但是，我希望将同一个人的连续消息分组。这意味着，对于每个连续的组，当它们不是第一个或最后一个 child 时，删除连续类之间的边距，并改变第一个和最后一个 child 的边界半径。

我已经调查过了:http://www.sitepoint.com/contiguous-sibling-selector/但不确定如何让它适用于不确定长度的列表。

这可能吗？

Answer 1

在不改变 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>