IE8에서 :nth-child 및 :before를 사용하여 요소의 스타일을 지정하는 방법은 무엇입니까?

IE8의 :nth-child 및 :before에 대한 브라우저 호환성 제한

Internet Explorer 8(IE8)은 출시될 때 고유한 문제를 제시합니다. :nth-child 및 :before와 같은 CSS 의사 요소를 구현합니다. 이러한 선택기는 최신 브라우저에서 널리 지원되지만 IE8에서는 제한 사항이 있습니다.

:nth-child를 사용하여 목록 내 특정 요소의 스타일을 지정할 때 이러한 문제 중 하나가 발생합니다. CSS 조각에서 볼 수 있듯이 #nav-primary ul li:nth-child(1) a:after 선택기는 첫 번째 목록 항목 앵커 태그의 이후 의사 요소에 스타일을 적용합니다. 그러나 이 선택자는 IE8에서 올바르게 작동하지 않습니다.

인접 형제 조합자를 사용하는 대체 접근 방식

이 제한을 피하기 위해 인접 형제 조합자( )를 다음과 같이 사용할 수 있습니다. 첫 번째 자식 의사 클래스와 함께. 이 접근 방식은 다음 CSS 구조를 사용하여 첫 번째 자식의 후속 형제를 대상으로 하여 동일한 결과를 효과적으로 달성합니다.

#nav-primary ul li:first-child a { ... }
#nav-primary ul li:first-child + li a { ... }
#nav-primary ul li:first-child + li + li a { ... }

이 방법은 :nth-child(1), :nth-child(의 동작을 효과적으로 에뮬레이트합니다. 2) 등등. 그러나 :nth-child(odd) 또는 :nth-child(4n 3)와 같이 :nth-child()의 더 복잡한 변형을 지원하지 않는다는 단점이 있습니다.

위 내용은 IE8에서 :nth-child 및 :before를 사용하여 요소의 스타일을 지정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!