내 n번째 하위 선택기가 소셜 아이콘에서 작동하지 않는 이유는 무엇입니까?

n번째 하위 선택기가 작동하지 않음: 이유 및 해결 방법

n번째 하위 선택자는 다음을 기반으로 요소를 선택하는 강력한 도구입니다. 상위 요소 내에서의 위치. 하지만 왜 선택기가 예상대로 작동하지 않는지 혼란스러울 수 있습니다.

제공된 코드의 경우 n번째 하위 선택기를 사용하여 #social- 내 소셜 아이콘에 서로 다른 배경 이미지를 적용합니다. 링크 div. n번째 자식 조건에도 불구하고 모든 아이콘은 동일하게 나타납니다. 이 문제는 선택기 작동 방식에 대한 오해에서 비롯됩니다.

n번째 하위 작동 방식

n번째 하위 선택자는 형제, 즉 동일한 상위 요소를 공유하는 요소를 계산합니다. 제공된 HTML에서 각 div.social-logo는 해당 앵커 태그의 유일한 하위 요소입니다. 따라서 n번째 하위 선택기는 지정된 값에 관계없이 하나의 요소만 계산합니다.

그러나 #social-links 내의 앵커 태그는 서로 형제입니다. 결과적으로 n번째 하위 선택기는 다음 구문을 사용하여 개별 앵커 태그를 효과적으로 타겟팅할 수 있습니다.

<code class="css">#social-links a:nth-child(1) div
#social-links a:nth-child(2) div
#social-links a:nth-child(3) div</code>

이제 n번째 하위 선택기는 div 하위 요소 대신 앵커 태그를 타겟팅함으로써 소셜 아이콘.

솔루션

문제를 해결하려면 원래 nth-child 선언을 다음으로 바꾸세요.

<code class="css">#social-links a:nth-child(1) div {
    background-image: url(...);
}

#social-links a:nth-child(2) div {
    background-image: url(...);
}

#social-links a:nth-child(3) div {
    background-image: url(...);
}</code>

타겟팅을 통해 태그를 사용하면 n번째 하위 선택기가 의도한 대로 각 소셜 아이콘에 서로 다른 배경 이미지를 올바르게 적용합니다.

위 내용은 내 n번째 하위 선택기가 소셜 아이콘에서 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!