如何使用CSS选择每个重复的类系列的最后一个子代？

Question

我正在尝试创建一个聊天应用程序。在聊天容器中，我将添加已发送和已接收的消息。显然，这些消息将没有特定的顺序。

我需要在每个重复的已发送或已接收消息系列的末尾添加一些边距。

<div class="container">
   <div class="sent_message"></div>
   <div class="sent_message"></div>
   <!-- NEED MARGIN -->
   <div class="received_message"></div>
   <div class="received_message"></div>
   <div class="received_message"></div>
   <!-- NEED MARGIN -->
   <div class="sent_message"></div>
   <!-- NEED MARGIN -->
   <div class="received_message"></div>
   <!-- NEED MARGIN -->
   <div class="sent_message"></div>
   <div class="sent_message"></div>
   <!-- NEED MARGIN -->
</div>

是否有CSS选择器来选择last-child每个系列的类，还是应该更改HTML的结构？

Answer 1

您可以选择每个.received_message 跟随一个的a .sent_message，反之亦然，而使用选择器.received_message + .sent_message, .sent_message + .received_message。

.received_message + .sent_message, .sent_message + .received_message{
  margin-top: 20px;
}

.container div{
  width: 120px;
  height: 40px;
  border: 1px dashed white;
}
.received_message{
  background: rebeccapurple;
}
.sent_message{
  background: orange;
}

<div class="container">
   <div class="sent_message"></div>
   <div class="sent_message"></div>
   <!-- NEED MARGIN -->
   <div class="received_message"></div>
   <div class="received_message"></div>
   <div class="received_message"></div>
   <!-- NEED MARGIN -->
   <div class="sent_message"></div>
   <!-- NEED MARGIN -->
   <div class="received_message"></div>
   <!-- NEED MARGIN -->
   <div class="sent_message"></div>
   <div class="sent_message"></div>
   <!-- NEED MARGIN -->
</div>