gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-27 23:05:08 29 4
gpt4 key购买 nike

<分区>

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

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?您的建议将非常有帮助。

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com