CSS를 사용하여 첫 번째 및 마지막 하위 요소를 올바르게 선택하려면 어떻게 해야 합니까?

CSS를 사용하여 첫 번째 및 마지막 자식 선택: 컨텍스트 이해

CSS에서 첫 번째 또는 마지막 자식을 선택하려면 CSS가 적용되는 컨텍스트입니다. 주어진 HTML 및 CSS 스니펫에서 볼 수 있듯이 :first-child 및 :last-child 의사 클래스를 .area 요소에 직접 적용하면 원하는 결과를 얻지 못할 수 있습니다. 이는 이러한 의사 클래스가 지정된 상위 요소의 첫 번째 및 마지막 하위 요소만 선택하기 때문입니다.

주어진 예에서 .area 요소는 HTML 구조 내에서 지정된 상위 요소의 하위 요소가 아닙니다. 이는 스크립트 태그나 동적으로 추가된 콘텐츠와 같은 다른 요소를 포함할 수 있는 body 요소의 직계 하위 요소입니다.

.area 요소의 첫 번째 하위 요소와 마지막 하위 요소를 올바르게 선택하려면 컨테이너 요소를 도입해야 합니다. .area 요소를 자체 클래스가 있는 div와 같은 다른 요소 내에 래핑함으로써 의사 클래스는 해당 컨테이너 내의 첫 번째 및 마지막 하위 항목을 정확하게 타겟팅할 수 있습니다.

다음은 올바른 내용을 보여주는 수정된 HTML 구조입니다. 사용법:

<div class="container">
  <div class="area">1</div>
  <div class="area">2</div>
  <div class="area">3</div>
  <div class="area">4</div>
</div>

이 구조를 사용하면 다음 CSS는 첫 번째와 마지막 .area를 올바르게 선택합니다. 어린이:

.container .area:first-child {
  background-color: red;
}

.container .area:last-child {
  background-color: green;
}

컨테이너 요소를 상위 선택자로 지정함으로써 CSS는 이제 해당 컨텍스트 내에서 .area 요소의 첫 번째와 마지막 하위를 정확하게 타겟팅할 수 있습니다.

위 내용은 CSS를 사용하여 첫 번째 및 마지막 하위 요소를 올바르게 선택하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!