n번째 자식 선택기가 중첩된 요소에서 작동하지 않는 이유는 무엇입니까?

n번째 하위 선택기가 작동하지 않는 이유는 무엇인가요?

n번째 하위 선택기를 사용하는 동안 이 문제가 발생할 수 있습니다. 스타일링 목적. 이 선택기를 사용하여 다양한 소셜 아이콘에 배경 이미지를 추가하더라도 모든 아이콘이 동일한 모양으로 표시된다는 것을 알 수 있습니다. 이는 코드에 문제가 있음을 의미합니다.

문제 조사

n번째 하위 선택기는 위치에 따라 특정 요소를 대상으로 지정하도록 설계되었습니다. 형제 요소. 그러나 코드에서 선택기:

#social-links div:nth-child(1),
#social-links div:nth-child(2),
#social-links div:nth-child(3),
#social-links div:nth-child(4),

는 #social-links 요소의 하위 요소인 div 요소를 대상으로 합니다. 그러나 이러한 div 요소는 항상 해당 앵커(a) 요소의 유일한 하위 요소입니다. 따라서 n번째 하위 선택자는 앵커 요소의 첫 번째이자 유일한 하위이므로 이들을 구별할 수 없습니다.

올바른 접근 방식

수정하려면 이 문제에서는 div 요소 대신 앵커 요소를 대상으로 지정하도록 n번째 하위 선택기를 조정해야 합니다. 이렇게 하면 특정 배경 이미지를 수신해야 하는 앵커 요소를 지정할 수 있습니다.

#social-links a:nth-child(1) div { 
   background-image: url('path/to/image1.svg'); 
}
#social-links a:nth-child(2) div { 
   background-image: url('path/to/image2.svg'); 
}
#social-links a:nth-child(3) div { 
   background-image: url('path/to/image3.svg'); 
}
#social-links a:nth-child(4) div { 
   background-image: url('path/to/image4.svg'); 
}

이 수정된 코드 구조는 각 앵커 요소가 형제 앵커 요소 간의 위치에 따라 의도한 배경 이미지를 수신하도록 보장합니다.

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