如何在聊天UI的特定类<li>之前添加border-radius

Question

我试图通过此answer实施聊天气泡CSS，问题是我不知道如何将border-bottom-left-radius提供给其他用户的第一条第三条消息{ {1}}到该用户的第四条消息。请运行此代码段以了解我所说的内容。提前谢谢。

＆＃13;

＆＃13;

border-bottom-right-radius

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

我认为解决方案比您想象的更简单。首先，如果您希望尽可能灵活地将每个＆＃34; user-chat-item-history＆＃34;在单独的<ul>中使用.outgoing或.incoming的类。因此，您需要更少CSS，整个脚本更易于维护：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;