在这种情况下 + :not() 是什么意思？ [复制]

Question

+ 和 :not() 选择器让我很困扰。这不是我的代码，但我想理解它。这是什么意思？

   .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-end) .chat-message {
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px; 
  }

  .chat-segment-sent.chat-end .chat-message {
    border-top-right-radius: 3px; 
  }

  .chat-segment-sent .chat-message {
    background: #1dc9b7;
    color: white;
    text-align: left;
  }

方块的排列方式如下：

chat-segment chat-segment-get/send chat-start
     chat-message /
/
chat-segment chat-segment-get/send
     chat-message /
/
chat-segment chat-segment-get/send chat-end
     chat-message /
/

问题是我需要修复该代码。当我添加另一个中间扇区时，边框半径不适用于这个新块。

所以我的第二个问题是，我该如何开始考虑修复该代码以使其正常运行？

Answer 1

虽然您问题下方的 cmets 为您提供了有用的理论资源链接，但以下是实用的：

 .chat-segment-sent.chat-start + :not(.chat-end) .chat-message {

意思是：

• 选择同时包含chat-segment-sent 和chat-start 类的元素
• 紧随其后的是一个对等（非父非子）元素（属于/具有任何类/ID），该元素不标记为chat-end 类。
• 然后关注具有chat-message 类的元素，它是上述对等元素的子元素。

资源：

• What does the "+" (plus sign) CSS selector mean?
• What does this symbol mean in CSS?

例子：

.chat-segment-sent.chat-start + :not(.chat-end) .chat-message {
    color:green;
    font-weight: bold;
    border-bottom: 1px solid #000;
    padding-top: 0.5rem;
}

<div class='chat-segment-sent chat-start'>
<div class='chat-message'>
  Hello 1
  </div>
</div>
<div class='chat-segment-sent chat-start'>
<div class='chat-message'>
  Hello 2
  </div>
</div>
<div class='chat-segment-sent chat-start'>
<div class='chat-message'>
  Hello 3
  </div>
</div>
<div class='chat-segment-sent chat-start'>
<div class='chat-message'>
  Hello 4
  </div>
</div>
<div class='chat-segment-sent chat-start'>
<div class='chat-message'>
  Hello 5
  </div>
</div>
<div class='chat-segment-sent chat-start chat-end'>
   <div class='chat-message'>END</div>
</div>
<div class='chat-segment-sent chat-start'>
<div class='chat-message'>
  Hello bonus
  </div>
</div>
<div class='chat-somethingelse'>
<div class='chat-message'>
  this element is highlighed because it is a sibling which does not contain the chat-end class.  
  </div>
</div>
<div class='chat-somethingelse chat-end'>
<div class='chat-message'>
  this element is not highlighted because it is a sibling but it does contain the chat-end class.  
  </div>
  <div>
     this element is not highlighted because it is not a neighbouring sibling. 
  </div>
</div>