html - 如何在 CSS 中设置特定子标签的样式

Question

我正在设计聊天布局的样式，但卡在了这一点上。这是我的片段

https://jsfiddle.net/9ce1d8or/

#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;
}

<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>

我想为每个第一个设置样式 .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;
}

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

#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;
}

<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>