>

채팅 응용 프로그램을 만들려고합니다. 채팅 컨테이너 내부에서 보내고받은 메시지를 모두 추가합니다. 메시지가 특정한 순서가 아닌 것이 분명합니다.

반복되는 일련의 송수신 메시지 끝에 약간의 여백을 추가해야합니다.

<div class="container">
   <div class="sent_message"></div>
   <div class="sent_message"></div>
   <!-- NEED MARGIN -->
   <div class="received_message"></div>
   <div class="received_message"></div>
   <div class="received_message"></div>
   <!-- NEED MARGIN -->
   <div class="sent_message"></div>
   <!-- NEED MARGIN -->
   <div class="received_message"></div>
   <!-- NEED MARGIN -->
   <div class="sent_message"></div>
   <div class="sent_message"></div>
   <!-- NEED MARGIN -->
</div>

last-child 를 선택하는 CSS 선택기가 있습니까  일련의 각 클래스 중 하나 또는 HTML의 구조를 변경해야합니까?

  • 답변 # 1

    .received_message 를 선택할 수 있습니다   .sent_message 에 의해 follwed  대신에 선택기 .received_message + .sent_message, .sent_message + .received_message 를 사용하여 .

    .received_message + .sent_message, .sent_message + .received_message{
      margin-top: 20px;
    }
    .container div{
      width: 120px;
      height: 40px;
      border: 1px dashed white;
    }
    .received_message{
      background: rebeccapurple;
    }
    .sent_message{
      background: orange;
    }
    
    

    <div class="container">
       <div class="sent_message"></div>
       <div class="sent_message"></div>
       <!-- NEED MARGIN -->
       <div class="received_message"></div>
       <div class="received_message"></div>
       <div class="received_message"></div>
       <!-- NEED MARGIN -->
       <div class="sent_message"></div>
       <!-- NEED MARGIN -->
       <div class="received_message"></div>
       <!-- NEED MARGIN -->
       <div class="sent_message"></div>
       <div class="sent_message"></div>
       <!-- NEED MARGIN -->
    </div>
    
    

  • 이전 iphone - 핵심 데이터 혼란
  • 다음 javascript - Фейл getElementsByClassName
  • 관련 질문