CSS 선택기: 타겟팅 요소에서 `>`와 공백의 차이점은 무엇입니까?

` 및 타겟팅 요소의 공백? " />

'>'의 미묘함 이해하기 CSS 선택기의 공백

CSS에서 문서 내의 특정 요소를 대상으로 지정할 때 '>'라는 두 가지 표기법이 나타날 수 있습니다. 및 공백은 언뜻 유사해 보이지만 사용법에는 결정적인 차이가 있습니다.

구별점: 직계 하위 항목

더 큰- CSS 선택기의 기호(>)는 div.card >.name 구문에서 직접적인 하위-상위 관계를 나타냅니다.

요소는

요소의 직계 하위 요소입니다.

한편, CSS 선택기의 공백( )은 div.card div.name을 작성할 때 하위 관계를 나타냅니다. 이는 인접 항목에 관계없이

요소 내에 중첩된 모든

요소를 선택하도록 브라우저에 지시합니다. parent.

설명의 예:

다음 HTML 구조를 고려하세요.

<div class="card">
    <div class="name">John</div>
    <p>Lorem ipsum</p>
    <div class="name">Jane</div>
</div>

div.card > :

• 및

  그러나 div.card div.name을 사용하면 다음도 선택됩니다.

  • (

    요소)

  실용적 의미:

  특정 요소를 정확하게 타겟팅하려면 이러한 구별을 이해하는 것이 중요합니다. 예를 들어 컨테이너 요소의 직계 하위 항목에만 스타일을 지정하려면 div.card > div.이름. 반대로, 컨테이너 내의 특정 클래스로 모든 요소의 스타일을 지정해야 하는 경우 중첩되어 있더라도 div.card div.name을 사용하세요.