CSS 목록에서 마지막 하위 요소의 스타일을 안정적으로 지정하려면 어떻게 해야 합니까?

CSS로 마지막 자식 타겟팅

목록 내 마지막 요소의 스타일을 지정하는 작업은 때로는 어려울 수 있습니다. 다음 CSS 규칙을 고려하세요.

#refundReasonMenu #nav li:last-child {
  border-bottom: 1px solid #b5b5b5;
}

안타깝게도 의도한 목적을 달성하지 못합니다. 이유를 이해하려면 :last-child 의사 클래스에 대한 브라우저 지원을 조사해야 합니다.

브라우저 지원 제한

CSS3 표준임에도 불구하고 :last-child 일부 브라우저에서는 의사 클래스가 여전히 제한 사항에 직면해 있습니다. 특히 Internet Explorer 9 이하 버전과 Safari 버전 3.2 이하에서는 이 선택기를 지원하지 않습니다.

Internet Explorer 7 및 Safari 3.2와 같이 :last-child를 지원하는 브라우저에서도 다음 사항에 유의하는 것이 중요합니다. 그에 상응하는 것인 :first-child는 이 브라우저에서 더 광범위하게 지원됩니다.

대안 해결 방법

이러한 한계를 극복하고 마지막 자식을 안정적으로 타겟팅하려면 최종 목록 항목에 "last-child"와 같은 고유 클래스를 명시적으로 추가하고 해당 클래스에 구체적으로 스타일을 적용하는 것이 좋습니다. :

li.last-child {
  border-bottom: 1px solid #b5b5b5;
}

이 접근 방식은 다양한 브라우저에서 일관되고 안정적인 스타일을 제공합니다.

위 내용은 CSS 목록에서 마지막 하위 요소의 스타일을 안정적으로 지정하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!