"~"(물결표 / 구불 구불 / 뒤틀림) CSS 선택기는 무엇을 의미합니까?

"~"(물결표 / 구불 구불 / 뒤틀림) CSS 선택기는 무엇을 의미합니까?

---

~캐릭터를 찾는 것은 쉽지 않습니다. 나는 CSS를 살펴보고 이것을 발견했습니다.

.check:checked ~ .content {
}

무슨 뜻이에요?

---

~선택은 실제로입니다 일반 형제 연결자 (후속-형제 콤비로 이름이 바뀌 선택기 레벨 4 )

일반적인 형제 결합자는 간단한 선택 자의 두 시퀀스를 구분하는 "물결표"(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 + ul- 외부보기 - ul바로 다음을 선택합니다 ul. 내부를 보지 않고 바로 다음 요소를 외부에서 찾습니다. 인접 형제 선택기
• ul ~ ul- 외부보기 - ul다음에 오는 모든 항목을 선택합니다. ul위치는 중요하지 않지만 둘 다 ul동일한 부모를 가져야합니다. 일반 형제 선택기

---

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

---

It is General sibling combinator and is explained in @Salaman's answer very well.

What I did miss is Adjacent sibling combinator which is + and is closely related to ~.

example would be

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

• Matches elements that are .b
• Are adjacent to .a
• After .a in HTML

In example above it will mark 2nd li but not 4th.

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

JSFiddle

---

Note that in an attribute selector (e.g., [attr~=value]), the tilde

Represents an element with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly value.

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

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