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类的元素
然后紧随其后的是未标记为chat-end类的同级（非父级非子级）元素（属于/具有任何类/id）。
然后关注chat-message类的元素，该元素是上述 peer元素的子元素。

资源：

示例：

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

在这种情况下，+：not（）是什么意思？

1 个答案: