html - div 中的 css 同级选择器 div

Question

我正在尝试使用兄弟选择器制作 Facebook 风格的聊天气泡。我已经尝试过这个 DEMO 但是 sibling 并不是这样工作的 DEMO 。 stackoverflow 用户的第二个演示答案 Serg Chernata 。

我缺少什么，有人可以帮助我吗？或者有什么办法可以像 Facebook 聊天气泡那样做到这一点？

*{
  box-sizing:border-box;
  position:relative; 
}
.container {
  width:100%;
  max-width:400px;
  margin:0px auto;
  padding:15px;
  background-color:#fafafa;
  border-radius:3px;
  margin-top:50px;
  border:1px solid #f5f5f5;
  font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
}
.conversations {
  display:inline-block;
  width:100%;
  padding:50px 0px;
}
.box {
  width:100%;
  padding:1px 0px;
  display:inline-block; 
  font-size:14px;
  font-weight:400;
}
.you {
  max-width:60%;
  border-radius:30px;
  background-color:#d8dbdf;
  padding:15px;
  float:left;  
}
.me {
  max-width:60%;
  border-radius:30px;
  background-color:#0084ff;
  padding:15px;
  float:right;
  color:#ffffff; 
  font-weight:300;
}

.box  .you + .me{
  border-bottom-right-radius: 5px;
}

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

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

<div class="container">
  <div class="conversations">
    <div class="box"><div class="you">1 Message</div></div>
    <div class="box"><div class="me">2 Message</div></div>
    <div class="box"><div class="me">3 Message</div></div>
    <div class="box"><div class="you">4 Message</div></div>
    <div class="box"><div class="you">5 Message</div></div>
    <div class="box"><div class="me">6 Message</div></div>
    <div class="box"><div class="me">6 Message</div></div>
  </div>
</div>

Answer 1

同级选择器必须在 DOM 树的同一级别上工作。您将每个 me 和 you 元素嵌套在父 box 中，这意味着这些同级选择器规则永远不会起作用。我移动了 you 和 me 类来共享 box 类(最初是父级 div)。

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

.you + .me,
.me + .you {
  margin-top: 1em;
}

对于可访问性和一般 HTML 语义，我认为该结构最适合作为 ul，因为这是聊天消息列表。我没有更改您的 HTML，但您最终可能应该进行调整。

*{
  box-sizing:border-box;
  position:relative; 
}
.container {
  width:100%;
  max-width:400px;
  margin:0px auto;
  padding:15px;
  background-color:#fafafa;
  border-radius:3px;
  margin-top:50px;
  border:1px solid #f5f5f5;
  font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
}
.conversations {
  display:inline-block;
  width:100%;
  padding:50px 0px;
}
.box {
  width:100%;
  padding:1px 0px;
  display:inline-block; 
  font-size:14px;
  font-weight:400;
}
.you {
  max-width:60%;
  border-radius:30px;
  background-color:#d8dbdf;
  padding:15px;
  float:left;  
}
.me {
  max-width:60%;
  border-radius:30px;
  background-color:#0084ff;
  padding:15px;
  float:right;
  color:#ffffff; 
  font-weight:300;
}

.you + .me{
  border-bottom-right-radius: 5px;
}

.you + .me,
.me + .you{
  margin-top: 1em;
}

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

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

<div class="container">
  <div class="conversations">
    <div class="box you">1 Message</div>
    <div class="box me">2 Message</div>
    <div class="box me">3 Message</div>
    <div class="box you">4 Message</div>
    <div class="box you">5 Message</div>
    <div class="box me">6 Message</div>
    <div class="box me">6 Message</div>
  </div>
</div>