0

我需要最后一个兄弟姐妹具有与前一个不同的样式，但没有它具有不同的标记！

它像是：

div#one .chat-segment .chat-get .chat-start - border-radius left !down! rounded 3 px rest 15px
div#two .chat-segment .chat-get - border-radius left !down! and !top! rounded 3 px rest 15px - 1 sibling
div#three .chat-segment .chat-get - border-radius left !down! and !top! rounded 3 px rest 15px 2 sibling
div#four .chat-segment .chat-get - border-radius left !top! rounded 3 px rest 15px - last sibling
div#five .chat-segment .chat-sent .chat-start - border-radius left !down! rounded 3 px rest 15px

那么有没有办法在这种情况下以某种方式编辑标记位置中的选择器以产生这种效果？

正确结果的视觉表示

在此处输入图像描述

到目前为止我所拥有的：（左消息）

.chat-segment-get {
    text-align: left;
    position: relative;
    margin: 0 2rem 0.5rem 0; }
  .chat-segment-get.chat-start .chat-message {
    border-bottom-left-radius: 3px; }
  .chat-segment-get.chat-start ~ :not(.chat-start) .chat-message {
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px; }
  .--the one that is need to be last sibling-- {
    border-top-left-radius: 3px; }
  .chat-segment-get .chat-message {
    background: #f1f0f0;
    color: rgba(0, 0, 0, 0.8);
    text-align: left; }

与已发送（正确的消息）相同

  .chat-segment-sent {
    text-align: right;
    position: relative;
    margin: 0 0 .5rem 3rem; }
  .chat-segment-sent.chat-start .chat-message {
    border-bottom-right-radius: 3px; }
  .chat-segment-sent.chat-start ~ :not(.chat-start) .chat-message {
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px; }
  .--that one that need to be the last sibling {
    border-top-right-radius: 3px; }
  .chat-segment-sent .chat-message {
    background: #1dc9b7;
    color: white;
    text-align: left; }

这是该段的代码。如果这是来自该用户的段中的第一个消息，则将聊天开始给予左侧或右侧的第一个消息。

'<!-- start .chat-segment -->\n' +
'<div id="message_'+ msg['id'] +'" class="chat-segment chat-segment-sent">\n' +
' <div class="chat-message tooltip-appending" data-toggle="tooltip" data-placement="auto" title="" data-original-title="' + msg['createdAt'] + '" data-html="true">\n' +
'  <p>\n' +
    msg['content'] +
'  </p>\n' +
' </div>\n' +
'</div>\n' +
'<!--  end .chat-segment -->' +
4

2 回答 2

0

我无法理解您上面的 html。但是，有办法。就像我一样写:last-child。child-div如果您有多个 div 并且它们的父级相同，那么您可以这样做。

<div class="main-div">
  <div class="child-div"></div>
  <div class="child-div"></div>
  <div class="child-div"></div>
  <div class="child-div"></div>
  <div class="child-div"></div>
</div>

.child-div:last-child {

}
于 2020-10-07T14:14:25.690 回答
0

我认为您正在寻找的是最后一个孩子选择器。如果您想根据 html-entity 的类型获取最后一个元素，也可以使用 last-of-type。

ul li:last-child {
  color: red;
}

div p:last-of-type {
  color: red;
}
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
<hr>
<div>
<p>One</p>
<p>Two</p>
<p>Three</p>
<p>Four</p>
<span>Don't use this</span>
</div>

于 2020-10-07T14:10:02.470 回答