如何在css中设置特定子标签的样式

Question

我正在设计聊天布局并陷入困境。这是我的代码段

https://jsfiddle.net/9ce1d8or/

＆＃13;

＆＃13;

#chatbox {
  background: #f7f7f7;
  padding: 10px;
}
#chatbox #chatmessages {
  max-height: 400px;
  overflow: auto;
}
#chatbox #chatmessages .messages {
  margin-bottom: 20px;
}
#chatbox #chatmessages .messages .message {
  padding: 10px;
  border-radius: 25px;
}
#chatbox #chatmessages .messages .message.message-received {
  background: green;
  margin: 5px 0;
  max-width: 40%;
}
#chatbox #chatmessages .messages .message.message-sent {
  float: right;
  margin: 5px 0;
  background: #ccc;
  max-width: 40%;
}

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

＆＃13;

<div id="chatbox">
    <div id="chatmessages" class="">
         <div class="messages" >
                   <div class="product"></div>
                  <div class="message message-received">Hello </div>
                  <div class="message message-sent">Hello mrs </div>
                  <div class="clearfix"></div>  
                  <div class="message message-sent">Hello mrs </div>    
                  <div class="message message-received">Hello </div>
                  <div class="message message-received">Hello </div>
         </div><!--.messages-->
      <div class="messages" >
                  <div class="product"></div>
                  <div class="message message-received">Hello </div>
                  <div class="message message-sent">Hello mrs </div>
                  <div class="clearfix"></div>  
                  <div class="message message-sent">Hello mrs </div>    
                  <div class="message message-received">Hello </div>
                  <div class="message message-received">Hello </div>
         </div><!--.messages-->
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我希望每个.message-received元素都是.messages元素。尝试了所有伪选择器但没有按预期工作。我试过了 .messages .message-received::first-of-type，::nth-of-type(2) 标记样式是否适合我想要的样式？或者我在用CSS做错了？您的建议非常有用。

Answer 1

first-child selector（与名称一样）选择元素的第一个子元素 - 在您的情况下将是类.product的元素。 您的标记中没有第一个.message-received类的孩子，这样选择器对您的案例不起作用。

要选择特定类的第一个元素，您可以做一个小技巧。首先使用第一个类样式设置该类的所有元素，然后使用adjacent sibling selector ~恢复所有兄弟节点的样式：

#chatbox #chatmessages .messages .message-received {
  background: red;
}
#chatbox #chatmessages .messages .message-received ~ .message-received {
  background: green;
}

这样，类的第一个元素将被设置样式：

＆＃13;

＆＃13;

#chatbox {
  background: #f7f7f7;
  padding: 10px;
}

#chatbox #chatmessages {
  max-height: 400px;
  overflow: auto;
}

#chatbox #chatmessages .messages {
  margin-bottom: 20px;
}

#chatbox #chatmessages .messages .message {
  padding: 10px;
  border-radius: 25px;
}

#chatbox #chatmessages .messages .message.message-received {
  background: red;
  margin: 5px 0;
  max-width: 40%;
}

#chatbox #chatmessages .messages .message.message-sent {
  float: right;
  margin: 5px 0;
  background: #ccc;
  max-width: 40%;
}

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

#chatbox #chatmessages .messages .message-received ~ .message-received {
  background: green;
}

＆＃13;

<div id="chatbox">
  <div id="chatmessages" class="">
    <div class="messages">
      <div class="product"></div>
      <div class="message message-received">Hello </div>
      <div class="message message-sent">Hello mrs </div>
      <div class="clearfix"></div>
      <div class="message message-sent">Hello mrs </div>
      <div class="message message-received">Hello </div>
      <div class="message message-received">Hello </div>
    </div>
    <!--.messages-->
    <div class="messages">
      <div class="product"></div>
      <div class="message message-sent">Hello mrs </div>
      <div class="message message-received">Hello </div>
      <div class="clearfix"></div>
      <div class="message message-sent">Hello mrs </div>
      <div class="message message-received">Hello </div>
      <div class="message message-received">Hello </div>
    </div>
    <!--.messages-->
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

在这里：JSFiddle

.messages > .message-received {
  background: pink;
}

.messages > .message-received ~ .message-received {
  background: none;
}

我找到了答案here，这是第一个（接受的）答案。 我们的想法是选择具有相同类的所有元素，然后＆＃34;取消选择＆＃34;所有具有相同类的元素都在第一个元素之后。

＆＃13;

＆＃13;

.messages > .message-received {
  background: pink;
}

.messages > .message-received ~ .message-received {
  background: none;
}

＆＃13;

<div id="chatbox">
  <div id="chatmessages" class="">
    <div class="messages">
      <div class="product"></div>
      <div class="message message-received">Hello* </div>
      <div class="message message-sent">Hello mrs </div>
      <div class="clearfix"></div>
      <div class="message message-sent">Hello mrs </div>
      <div class="message message-received">Hello </div>
      <div class="message message-received">Hello </div>
    </div>
    <!--.messages-->
    <div class="messages">
      <div class="product"></div>
      <div class="message message-received">Hello* </div>
      <div class="message message-sent">Hello mrs </div>
      <div class="clearfix"></div>
      <div class="message message-sent">Hello mrs </div>
      <div class="message message-received">Hello </div>
      <div class="message message-received">Hello </div>
    </div>
    <!--.messages-->
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;