Html css同级选择器div in div

我正在尝试使用兄弟选择器创建一个facebook风格的聊天泡泡。我尝试过这个，但是兄弟姐妹们不是这样工作的。stackoverflow用户的第二个演示答案是

我错过了什么请任何人帮我好吗？还是像facebook聊天泡泡那样做

*{
框大小：边框框；
位置：相对位置；
}
.集装箱{
宽度：100%；
最大宽度：400px；
保证金：0px自动；
填充：15px；
背景色：#fafafa；
边界半径：3px；
边缘顶部：50px；
边框：1px实心#F5；
字体系列：Arial，“Helvetica Neue”，Helvetica，无衬线；
}
.对话{
显示：内联块；
宽度：100%；
填充：50px 0px；
}
.盒子{
宽度：100%；
填充：1px0px；
显示：内联块；
字体大小：14px；
字体大小：400；
}
.你{
最大宽度：60%；
边界半径：30px；
背景色：#d8dbdf；
填充：15px；
浮动：左；
}
.我{
最大宽度：60%；
边界半径：30px；
背景色：#0084ff；
填充：15px；
浮动：对；
颜色：#ffffff；
字体大小：300；
}
.盒子.你+.我{
边框右下半径：5px；
}
.box.me+.me{
边框右上角半径：5px；
边框右下半径：5px；
}
我：最后一种{
边框右下半径：30px；
}

1信息
2信息
3信息
4信息
5信息
6信息
6信息

在您的示例中，

.box

-容器是问题所在。在这种情况下，不能使用silbing选择器或类型的

：last。
原因是
.me
-容器不是另一个
.me
-容器的silbing。是表哥。不幸的是，这里没有表亲
 同级选择器必须在DOM树的同一级别上工作。您将每个
me
和
You
元素嵌套在父
框
中，这意味着那些同级选择器规则将永远无法工作。我移动了
you
和
me
类以共享
框
类（最初是父
div
）

为了在
you
和
me
分组之间增加一点间距，我添加了以下内容：

.you+.me，
.我+.你{
边缘顶部：1米；
}

对于可访问性和通用HTML语义，我认为该结构最适合作为
ul
，因为这是一个聊天消息列表。我没有改变你的
HTML
，但你最终可能会做出调整


*{
框大小：边框框；
位置：相对位置；
}
.集装箱{
宽度：100%；
最大宽度：400px；
保证金：0px自动；
填充：15px；
背景色：#fafafa；
边界半径：3px；
边缘顶部：50px；
边框：1px实心#F5；
字体系列：Arial，“Helvetica Neue”，Helvetica，无衬线；
}
.对话{
显示：内联块；
宽度：100%；
填充：50px 0px；
}
.盒子{
宽度：100%；
填充：1px0px；
显示：内联块；
字体大小：14px；
字体大小：400；
}
.你{
最大宽度：60%；
边界半径：30px；
背景色：#d8dbdf；
填充：15px；
浮动：左；
}
.我{
最大宽度：60%；
边界半径：30px；
背景色：#0084ff；
填充：15px；
浮动：对；
颜色：#ffffff；
字体大小：300；
}
.你+我{
边框右下半径：5px；
}
.你+.我，
.我+.你{
边缘顶部：1米；
}
.我+.我{
边框右上角半径：5px；
边框右下半径：5px；
}
我：最后一种{
边框右下半径：30px；
}

1信息
2信息
3信息
4信息
5信息
6信息
6信息
就像另一个人说的那样.box容器是问题所在。只需将您的选择器编辑为

.box:last-of-type > .me {
   border-bottom-right-radius: 30px;
} 

您可以通过使用大多数情况下的父元素来控制子元素。我把
框
和
我，你
类颠倒过来了。我希望这个解决方案会有所帮助


.me，
.你{
显示：内联块；
宽度：100%；
}
.我.盒子{
浮动：对；
}
.你，盒子{
浮动：左；
背景色：#d8dbdf；
颜色：#444；
}
.盒子{
最大宽度：60%；
边界半径：30px；
背景色：#0084ff；
填充：15px；
颜色：#ffffff；
字体大小：300；
}
.你+.我.盒子{
边框右下半径：5px；
}
.me+.me.box{
边框右上角半径：5px；
边框右下半径：5px；
}
.me:最后一个类型。框{
边框右下半径：30px；
}

1信息
2信息
3信息
4信息
5信息
6信息
7信息
8信息
9信息
你想制作什么样的演示，第一个还是第二个？@vapporwashmake我正在尝试第一个演示，我想制作第二个演示。