CSS에서 마지막 자식을 제외한 모든 자식의 스타일을 지정하는 방법은 무엇입니까?

CSS를 사용하여 마지막 자식을 제외한 자식 선택

웹 개발, 특히 CSS를 사용하는 경우 지원하고 싶은 경우가 있을 수 있습니다. 마지막 자식을 제외한 요소의 모든 자식에 스타일을 적용합니다. 이는 CSS 선택기 레벨 3의 부정 의사 클래스를 사용하여 달성할 수 있습니다.

구문:

:not(:last-child) { /* styles */ }

작동 방식:

:not() 의사 클래스를 사용하면 지정된 선택기와 일치하는 요소를 제외할 수 있습니다. 이 경우 이를 사용하여 마지막 하위 요소를 선택하는 :last-child 가상 클래스를 무효화합니다.

예:

다음 HTML 구조를 고려하세요. :

<div>
  <div>First child</div>
  <div>Second child</div>
  <div>Third child</div>
</div>

마지막 자식을 제외한 모든 자식의 스타일을 지정하려면 다음 CSS를 사용할 수 있습니다.

:not(:last-child) {
  background-color: blue;
}

이렇게 하면 처음 두 자식에는 파란색 배경색이 적용되지만 적용되지는 않습니다. 세 번째 자식입니다.

호환성:

Internet Explorer 8 이하 브라우저에서는 :not() 의사 클래스가 지원되지 않는다는 점에 주목할 필요가 있습니다.

위 내용은 CSS에서 마지막 자식을 제외한 모든 자식의 스타일을 지정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!