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

Program / 글쓴이

~캐릭터를 검색하는 것은 쉽지 않습니다. 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입니다.

답변

일반 형제 콤비 네이터

일반 형제 콤비 네이터 선택기는 인접한 형제 콤비 네이터 선택기와 매우 유사합니다. 차이점은 선택한 요소가 첫 번째 요소를 즉시 성공시킬 필요는 없지만 그 이후에 나타날 수 있다는 것입니다.

더 많은 정보

답변

그것은이다 General sibling combinator아주 잘 Salaman의 대답 @에 설명되어 있습니다.

내가 놓친 것은 Adjacent sibling combinator입니다. +와 밀접한 관련이 ~있습니다.

예를 들면 

.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>
  • 있는 요소와 일치 .b
  • 에 인접 .a
  • 후 .aHTML에서

위의 예에서는 2 위를 표시 li하지만 4 위는 표시 하지 않습니다.

   .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

답변

속성 선택기 (예 [attr~=value]:)에서 물결표를

속성 이름이 attr 인 요소를 나타 냅니다. 값은 공백으로 구분 된 단어 목록이며 그 중 하나는 정확히 value 입니다.

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

답변