CSS 선택기 "~"는 무엇을 의미합니까?

CSS 선택기 "~"는 무엇을 의미합니까?

검색 중~캐릭터는 쉽지 않습니다.CSS를 좀 살펴보다가 이것을 발견했습니다.

.check:checked ~ .content {
}

그것은 무엇을 뜻하나요?

그~실렉터는 실제로 다음과 같은 후속 형제 조합자입니다(2017년까지 일반 형제 조합자로 불림).

후속 형제 조합은 단순 선택기의 두 시퀀스를 구분하는 "틸드"(U+007E, ~) 문자로 구성됩니다.두 시퀀스로 표시되는 요소는 문서 트리에서 동일한 상위 항목을 공유하고 첫 번째 시퀀스로 표시되는 요소는 두 번째 시퀀스로 표시되는 요소보다 선행합니다(즉시는 아님).

다음 예를 생각해 보십시오.

.a ~ .b {
  background-color: powderblue;
}

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

.a ~ .b다음과 같은 이유로 4번째 및 5번째 목록 항목과 일치합니다.

• 이다.b요소들
• 의 형제입니다..a
• 뒤에 나타남.aHTML 원본 순서로.

저도 마찬가지예요..check:checked ~ .content모두 일치.content의 형제 요소.check:checked그리고 그 뒤에 나타납니다.

가족의 다른 조합원도 확인하고 이 특정 조합원이 무엇인지 다시 확인하는 것이 좋습니다.

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

검사 목록의 예:

• ul li내부 보기 - 모든 항목을 선택합니다.li내부(어디에나)에 배치된 요소ul하위 결합자
• ul > li내부 보기 - 직접만 선택합니다. li의 요소.ul즉, 직접 자녀만 선택합니다.li의ul자식 결합기
• ul + ulOutside 보기 - 선택합니다.ul 직후에ul안을 보는 것이 아니라 바로 다음 요소를 밖에서 찾는 것입니다. 인접 형제 조합자 / 다음 형제 조합자
• ul ~ ul외부 보기 - 다음을 모두 선택합니다. ul하지만 둘 다ul의 부모가 같아야 합니다. 일반 형제 조합자 / 후속 형제 조합자

---

여기서 보고 있는 것은 일반 형제 조합자 / 후속 형제 조합자입니다.

내용이 최신이 아니므로 이 게시물은 사용되지 않는 것으로 표시됩니다.현재 새 상호 작용을 허용하지 않습니다.

일반 형제자매결연자

일반 형제 조합 선택기는 인접한 형제 조합 선택기와 매우 유사합니다.차이점은 선택 중인 요소가 첫 번째 요소의 바로 뒤를 이을 필요는 없지만, 그 이후에 어디에나 나타날 수 있다는 것입니다.

추가 정보

언급URL : https://stackoverflow.com/questions/10782054/what-does-the-tilde-squiggle-twiddle-css-selector-mean