div中的css兄弟选择器div [重复]

Question

我正在尝试使用兄弟选择器制作一个 facebook 风格的聊天气泡。我试过这个 DEMO 但是兄弟姐妹不像这样 DEMO 。 Serg Chernata 来自 stackoverflow 用户的第二个演示答案。

我想念的任何人都可以帮助我吗？或者有没有像 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>

Answer 2

在大多数情况下，您可以通过使用 parent 来控制子元素。我已经颠倒了box 和me,you 课程。我希望这个解决方案会有所帮助。

.me,
.you {
    display: inline-block;
    width: 100%;
}
.me .box {
    float: right;
}
.you .box {
    float: left;
    background-color: #d8dbdf;
    color: #444;
}
.box {
    max-width: 60%;
    border-radius: 30px;
    background-color: #0084ff;
    padding: 15px;
    color: #ffffff;
    font-weight: 300;
}
.you + .me .box {
    border-bottom-right-radius: 5px;
}
.me + .me .box {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
.me:last-of-type .box {
    border-bottom-right-radius: 30px;
}

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

Answer 3

在您的示例中，.box-container 是问题所在。在这种情况下，您不能使用 silbing-selector 或 :last-of-type。 原因是.me-container 不是另一个.me-container 的silbing。应该是表弟。不幸的是，没有表亲选择器。 ;)

Answer 4

就像其他人所说的 .box 容器是问题所在。只需将您的选择器编辑为此

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