jQuery는 정말로 모든 CSS3 선택자를 지원합니까? :nth-last-child()와 그 너머의 미스터리.

jQuery의 CSS3 선택기 지원 풀기: :nth-last-child() 및 그 이상 설명

jQuery는 다양한 CSS 지원을 자랑합니다. 선택기의 CSS3 기능은 여러분을 당황하게 만들 수 있습니다. 그러한 예 중 하나가 :nth-last-child() 선택기입니다. Firefox, Chrome, IE 9와 같은 최신 브라우저에서는 작동하는 것처럼 보이지만 공식 문서에는 이상하게도 없습니다.

jQuery의 선택기 아키텍처

jQuery의 선택기 구현은 두 가지 접근 방식에 의존합니다. 처음에는 최신 CSS 선택기와의 호환성을 제공하는 기본 document.querySelectorAll() 메서드를 활용하려고 시도합니다. 이 접근 방식이 실패하면 jQuery는 자체 선택기 라이브러리인 Sizzle을 사용합니다.

이 전략은 특정 브라우저에서 :nth-last-child()의 명백한 기능에 대한 설명을 제공합니다. 유효한 CSS 선택기로서 document.querySelectorAll()을 지원하는 브라우저(예: Firefox, Chrome, IE 9)는 이를 직접 처리하고 적절한 노드 목록을 반환하여 Sizzle을 효과적으로 우회할 수 있습니다.

공개 지원되는 CSS3 선택기

jQuery 1.9부터 Sizzle(jQuery의 선택기 라이브러리)는 몇 가지 주목할만한 예외를 제외하고 선택기 레벨 3 표준에 정의된 거의 모든 CSS3 선택기를 지원합니다.

• 의사 요소: 문서 트리의 추상화로서 CSS 기반 구현으로 인해 명시적 선택이 불가능합니다.
• 동적 의사 클래스: 이벤트 기반 :hover, :active 및 :focus와 같은 의사 클래스는 지원되지 않습니다. 대신 요소가 이러한 상태에 들어오고 나갈 때 코드를 실행하려면 이벤트 핸들러를 사용해야 합니다.
• 네임스페이스 접두사: jQuery는 CSS에서 네임스페이스를 처리하지 않습니다.

jQuery 1.9에 도입된 선택기

jQuery 1.9에서는 다음을 포함하여 다양한 레벨 3 선택기를 사용할 수 있게 되었습니다.

• :target
• : 루트
• :nth-last-child()
• :nth-of-type()
• :nth-last-of-type()
• :최초 유형
• :최종 유형
• :유형만

호환성 주의 사항

jQuery 1.8 이하 버전에서는 위 선택기와 CSS2 선택기인 :lang()에 대한 지원이 부족합니다.

:nth-last-child()의 사례

:nth-last-child()를 사용한 예에서 선택기는 Firefox, Chrome 및 IE 9에서 성공적으로 처리됩니다. 이러한 브라우저는 document.querySelectorAll()을 지원하기 때문입니다. 그러나 IE 8 에뮬레이션 모드는 :nth-last-child()를 지원하지 않으므로 실패합니다. jQuery/Sizzle도 이 선택기를 구현하지 않으므로 폴백 메커니즘이 없어 실패가 발생합니다.

간격 해소

jQuery 1.9 이상으로 업그레이드하는 것이 불가능한 경우 jQuery의 사용자 정의 선택기 확장을 사용하여 누락된 의사 클래스를 구현하는 것을 고려할 수 있습니다. jQuery 1.9는 언급된 선택기에 대한 지원을 추가하면서 이전 버전의 IE와의 호환성을 제공한다는 점은 주목할 가치가 있습니다.

위 내용은 jQuery는 정말로 모든 CSS3 선택자를 지원합니까? :nth-last-child()와 그 너머의 미스터리.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!