如何使用CSS选择连续同类别消息的最后一个元素？聊天应用样式需求

完全不用调整你的现有HTML结构，我们可以利用CSS选择器精准定位每一组连续同类型消息的最后一个元素，下面分两种场景给出方案：

现代浏览器推荐方案 #

现在Chrome、Firefox、Safari等主流浏览器都支持:has()伪类，用它可以轻松实现需求：

/* 给连续发送消息的最后一个元素加底部外边距 */
.sent_message:not(:has(+ .sent_message)) {
  margin-bottom: 1.5rem; /* 替换成你需要的间距大小 */
}

/* 给连续接收消息的最后一个元素加底部外边距 */
.received_message:not(:has(+ .received_message)) {
  margin-bottom: 1.5rem;
}

选择器逻辑说明：

• :has(+ .sent_message)：判断当前.sent_message的下一个直接兄弟元素也是发送消息；
• :not(...)：取反，也就是当前元素的下一个兄弟不是发送消息（可能是接收消息，或者已经是容器的最后一个元素）；
• 这样组合就刚好选中了每一组连续发送消息的末尾元素，接收消息的逻辑完全一致。

兼容旧浏览器方案（无:has()依赖） #

如果需要兼容不支持:has()的旧浏览器（比如IE或早期Chrome版本），可以换一种思路实现同样的效果：

/* 先给所有消息默认添加底部外边距 */
.sent_message, .received_message {
  margin-bottom: 1.5rem;
}

/* 给紧跟在同类型消息后面的元素去掉外边距（也就是连续组的中间元素） */
.sent_message + .sent_message,
.received_message + .received_message {
  margin-bottom: 0;
}

这个方案的逻辑是：默认所有消息都有间距，但如果某条消息的前一条是同类型的，就去掉它的间距，这样每组连续消息的最后一条会保留间距，完全符合你的需求。

效果验证 #

用你的HTML结构测试的话：

• 前两个.sent_message：只有第二个（连续组最后一个）会保留间距；
• 三个.received_message：只有第三个（连续组最后一个）会保留间距；
• 单独的.sent_message和.received_message都会正常显示间距，完美匹配你的需求。

内容的提问来源于stack exchange，提问作者Reza Amya