내 :last-child 선택기가 작동하지 않는 이유는 무엇입니까?

:last-child 이해

CSS 선택기:last-child는 부모의 마지막 자식 요소를 대상으로 하도록 설계되었습니다. 제공된 코드 샘플에서는 "완전" 클래스가 있는 요소에 선택기를 적용했습니다. 그러나 상위 요소에 선택기의 대상이 아닌 추가 요소가 포함되어 있으면 문제가 발생합니다.

문제

제공된 HTML에서

"완전한" 클래스가 있는 요소는 상위

클래스의 마지막 요소가 아닙니다. 요소. 즉, :last-child 선택기가 적용되지 않습니다.

대체 솔루션

이 문제를 해결하려면 대체 선택기를 사용해 볼 수 있습니다.

• :last-of-type: 이 선택기는 특정 유형의 마지막 요소를 대상으로 합니다. 부모 안에 입력하세요. 이 경우 마지막
• "complete" 클래스가 있는 요소.
• jQuery $("li.complete").last();": 이 jQuery 표현식은 "li.complete"와 일치하는 마지막 요소를 선택합니다. 완전한" 선택기입니다. 동일한 클래스의 요소가 여러 개 있을 때 원하는 요소를 타겟팅하는 효과적인 방법입니다.

이해하기 동작

:last-child는 해당 요소가 상위 컨테이너의 마지막 요소가 아닌 경우, 즉 대상 컨테이너 뒤에 다른 요소가 있는 경우 해당 요소를 선택하지 않는다는 점을 기억하는 것이 중요합니다. 요소인 :last-child는 적용되지 않습니다. 이 동작은 위치에 관계없이 특정 유형의 마지막 요소를 대상으로 하는 :last-of-type과 다릅니다. parent.

결론

:last-child를 사용할 때 대상 요소가 상위 컨테이너의 가장 마지막 하위 요소인지 확인하세요. 그렇지 않은 경우 대체 선택기 사용을 고려하세요. :last-of-type 또는 jQuery 표현식과 같이 원하는 결과를 얻을 수 있습니다.

위 내용은 내 :last-child 선택기가 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!