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

Question

这个问题在这里已有答案：

• What does the “+” (plus sign) CSS selector mean? 11个答案

我正在尝试使用兄弟选择器制作一个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

您可以使用父级大多数情况控制子元素。我已经逆转了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容器不是其他.me容器的淤积。这将是堂兄。不幸的是，没有堂兄选择器。 ;）

Answer 4

就像对方说的那样.box容器就是问题所在。只需编辑您的选择器即可

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