如何在聊天 UI 的特定类 <li> 之前添加边框半径答案

【问题标题】：How to add border-radius before specific class of <li> for chat UI如何在聊天 UI 的特定类 <li> 之前添加边框半径
【发布时间】：2018-01-23 00:20:33
【问题描述】：

我正在尝试从这个answer 实现聊天气泡CSS，问题是我不知道如何将border-bottom-left-radius 给其他用户的第一条第三条消息和border-bottom-right-radius 给第四条消息用户。请运行此代码 sn-p 以了解我在说什么。提前致谢。

.chat-ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

.chat-ul .chat-li{
  display:inline-block;
  clear: both;
  padding: 20px;
  border-radius: 30px;
  margin-bottom: 2px;
  font-family: Helvetica, Arial, sans-serif;
}

.incoming {
  background: #eee;
  float: left;
}

.outgoing{
  float: right;
  background: #0084ff;
  color: #fff;
}

.incoming:first-child{
  border-bottom-left-radius: 5px;
}

.outgoing:first-child{
  border-bottom-right-radius: 5px;
}

.incoming + .outgoing{
  border-bottom-right-radius: 5px;
}

.outgoing + .outgoing{
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.outgoing:last-of-type {
  border-bottom-right-radius: 30px;
}

.outgoing + .incoming{
  border-bottom-left-radius: 5px;
}

.incoming + .incoming{
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.incoming:last-of-type {
  border-bottom-left-radius: 30px;
}

<ul  class='chat-ul' style='margin-top: 10px'>
	<li class="chat-li incoming">By Other User, first message</li>
	<li class="chat-li incoming">By Other User, second message</li>
	<li class="chat-li incoming">By Other User, third message</li>
	<li class="chat-li outgoing">By this User, first message</li>
	<li class="chat-li outgoing">By this User, secondmessage</li>
	<li class="chat-li outgoing">By this User, third message</li>
	<li class="chat-li outgoing">By this User, fourth message</li>
	<li class="chat-li incoming">By Other User, first message</li>
	<li class="chat-li incoming">By Other User, second message</li>
	<li class="chat-li incoming">By Other User, third message</li>
</ul>

【问题讨论】：

您能否根据消息的发件人将它们包装在单独的<ul> 中？
他已经添加了链接，这不是重复的，因为另一个答案不适合这个
您的 css 不应该工作，因为 css 标签不应该那样工作。 last-of-type 标记仅适用于元素选择器而不是类选择器。在我看来，你需要用另一个 div/ul 包装它们，否则在你的场景中动态选择特定元素是不可能的，除非你使用一些 js。
在 CSS 中这是不可能的，您需要将每组消息包装在一个单独的包装器中。所以你必须在服务器端进行包装。

标签： html css

【解决方案1】：

我认为解决方案比您想象的要简单。首先，如果您想尽可能灵活地将每个“用户聊天项目历史”放在一个单独的<ul> 中，并带有.outgoing 或.incoming 的类。因此你需要更少的CSS 并且整个脚本更易于维护：

.chat-ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

.chat-ul .chat-li {
  display:inline-block;
  clear: both;
  padding: 20px;
  margin-bottom: 2px;
  font-family: Helvetica, Arial, sans-serif;
}

.incoming .chat-li {
  background: #eee;
  float: left;
  border-radius: 5px 30px 30px 5px;
}

.outgoing .chat-li{
  float: right;
  background: #0084ff;
  color: #fff;
  border-radius: 30px 5px 5px 30px;
}

.incoming .chat-li:first-child {
  border-top-left-radius: 30px;
}

.incoming .chat-li:last-child {
  border-bottom-left-radius: 30px;
}

.outgoing .chat-li:first-child {
  border-top-right-radius: 30px;
}

.outgoing .chat-li:last-child {
  border-bottom-right-radius: 30px;
}

<ul  class='chat-ul incoming' style='margin-top: 10px'>
	<li class="chat-li">By Other User, first message</li>
	<li class="chat-li">By Other User, second message</li>
	<li class="chat-li">By Other User, third message</li>
</ul>

<ul  class='chat-ul outgoing' style='margin-top: 10px'>
	<li class="chat-li">By this User, first message</li>
	<li class="chat-li">By this User, secondmessage</li>
	<li class="chat-li">By this User, third message</li>
	<li class="chat-li">By this User, fourth message</li>
</ul>

<ul  class='chat-ul incoming' style='margin-top: 10px'>
	<li class="chat-li">By Other User, first message</li>
	<li class="chat-li">By Other User, second message</li>
	<li class="chat-li">By Other User, third message</li>
</ul>

【讨论】：

添加 <ul> 在推送/添加新消息或检索历史记录时需要额外的 js 逻辑，但肯定会使 css 更易于阅读和维护。