CSS에서 '~'는 어디에 사용됩니까?

CSS 콤비네이터의 인기 순위를 매긴다면 물결표가 아마도 목록의 맨 아래에 있을 것입니다. 틈새 상황을 위해 작성된 멋진 작은 연결기입니다!

한 걸음 물러서서 CSS 연결자에 대해 알아봅시다.

CSS 조합자 순위 지정 :

1. " " : 자손 연결기

가장 인기 있는 CSS 결합자는 후손 결합자입니다.
" "가 무엇을 하는지 혼란스럽습니까? 구문은 다음과 같습니다.

.card-container button-container{
     /* some property here */
}

프론트 엔드 개발자로서 당신은 이 연산자를 사용하고 있다는 사실을 깨닫지 못한 채 결국 이 연산자를 사용하게 됩니다! 이것이 하는 일은 첫 번째 요소가 조상 중 하나인 경우에만 두 번째 요소를 선택하는 것입니다.

더 나은 이해를 위해 여기에서 코드를 가지고 놀 수 있습니다: code sample


2. > : 하위 조합기

가까운 두 번째는 하위 연결자이며 첫 번째 요소의 직계 하위 요소인 경우에만 두 번째 요소를 선택하는 것이 임무입니다.

예는 혼란을 없애줍니다.

card-container > p{
     /* some property here  */
}

다음은 위의 코드 샘플과 유사한 코드 샘플입니다. code sample


3. + : 인접 형제 결합기

내 코딩 여정에서 나는 아직 내 프로젝트에서 순위 목록의 마지막 두 개를 사용할 기회가 없었지만 여기 있습니다!
플러스 또는 인접한 형제 결합자는 두 번째 요소와 일치하는 경우 첫 번째 요소의 인접한 요소를 선택하는 데 사용됩니다.

예시 :

h1 + p{
   /* some property here */
}

이해를 돕기 위한 코드 스니펫은 다음과 같습니다. code sample

4. ~ : 일반 형제 결합기

마지막으로 가장 중요한 것은 물결표입니다. 기술적으로 일반 형제 연결자 로 알려져 있습니다. 또는 벌레 . 또는 구불구불한 선. 당신이 그것을 무엇이라고 부르든, 그것은 두 번째 요소와 일치하는 첫 번째 요소의 형제를 선택하는 것입니다.

방법은 다음과 같습니다.

card-container-first-batch ~ rest

그것은 매우 코너 케이스이지만 존재합니다. 따라서 알아야 할 우리의 일!
다음은 위의 코드 샘플과 유사한 코드 샘플입니다. code sample


그래서 요약 :

CSS 조합자에는 4가지 유형이 있습니다: 자손("") , child(>) , 인접 형제(+) 및 일반 형제(~).

조심스럽게 사용하고 코드가 깨지지 않기를 바랍니다!

더 재미있는 비트를 위해(Css가 재미있다고 생각한다면 😂)

나를 팔로우하고 내 github를 확인하고 다음에 만나요!