在这种情况下，+: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

虽然你的问题下面的评论为你提供了理论有用资源的链接，但这里是实用的：

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

平均值：

• 选择同时包含chat-segment-sent和chat-start类的元素
• 然后紧接着是一个对等(非父非子(元素(属于/具有任何类/id(，该元素被标记为chat-end类
• 然后关注具有chat-message类的元素，该元素是上述对等元素的子元素

资源：

• "+"(加号(CSS选择器的意思是
• 这个符号在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>