[css] “~”(물결 / 물림 / 비틀기) CSS 선택기는 무엇을 의미합니까?

가족 의 다른 조합 자를 확인 하고이 특정 조합 으로 돌아 오는 것이 좋습니다.

• ul li
• ul > li
• ul + ul
• ul ~ ul

검사 목록 예 :

• ul li– 내부 찾고 – 선택 모든li 요소 (어디서나) 내부에 위치 ul; 후손 선택기
• ul > li– 들여다보기 – ; 의 직접 li 요소 만 선택합니다 ul. 그것은 단지 직접 아이들이 선택됩니다 즉 li의를 ul; 자식 선택기 또는 자식 결합기 선택기
• ul + ul– 밖을보고 – ul바로 다음을 선택합니다 ul; 내부를 들여다 보지 않고 바로 다음 요소를 찾아야합니다. 인접 형제 선택기
• ul ~ ul– 찾고 외부 – 모두 선택 ul(가) 다음하는 ul것이하지만, 모두 어디 중요하지 않습니다 ul같은 부모를 가진해야한다; 일반 형제 선택기

우리 가보고있는 것은 General Sibling Selector입니다.

답변

.a + .b {
  background-color: #ff0000;
}

<ul>
  <li class="a">1st</li>
  <li class="b">2nd</li>
  <li>3rd</li>
  <li class="b">4th</li>
  <li class="a">5th</li>
</ul>

   .a + .b {
     background-color: #ff0000;
   }

<ul>
  <li class="a">1st</li>
  <li class="b">2nd</li>
  <li>3rd</li>
  <li class="b">4th</li>
  <li class="a">5th</li>
</ul>