Internet Explorer 8의 nth-child()에 대한 CSS 지원

최신 브라우저에서 CSS nth-child() 요소는 일반적으로 테이블에서 얼룩말 줄무늬 효과를 얻기 위해 사용되었습니다. 그러나 이 기능은 특히 Internet Explorer 8에는 없습니다. 이 제한 사항을 해결하는 방법은 다음과 같습니다.

Polyfill 접근 방식:

Selectivizr는 Internet Explorer의 폴리필을 효과적으로 확장하는 확립된 폴리필입니다. CSS 지원. Selectivizr를 구현하면 CSS 스타일에서 nth-child()를 활용할 수 있습니다.

Polyfill 없이:

Internet Explorer 8의 첫 번째 하위 선택기에 대한 지원은 nth-child() 기능을 에뮬레이트할 수 있는 기회:

/*li:nth-child(2)*/
li:first-child   li {}

이 접근 방식을 사용하면 두 번째 li 요소에 대한 스타일을 지정하여 nth-child(2)의 동작을 효과적으로 모방할 수 있습니다.

제한 사항:

이 에뮬레이션 트릭은 nth-child(2)와 같은 간단한 선택자에는 작동하지만 nth-child(2n)과 같은 더 복잡한 표현식을 처리할 때는 부족합니다. 1) 또는 n번째 자식(홀수). Internet Explorer 8에는 이러한 선택기의 미묘한 기능을 복제하는 기능이 부족합니다.