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

첫 번째 및 마지막 하위 요소 선택 시 CSS 문제 해결

CSS를 사용하여 첫 번째 및 마지막 하위 요소를 선택하는 데 어려움이 있는 경우 컨텍스트를 고려하는 것이 중요합니다. 당신의 코드. 제공된 Fiddle에서 .area 요소는 꼬리표. 그러나 :first-child 및 :last-child 의사 클래스를 올바르게 적용하려면 .area 요소가 컨테이너 내에 중첩되어 있는지 확인하는 것이 중요합니다.

이 문제를 해결하려면 주위에 컨테이너 요소를 추가하세요. .area 요소. 이렇게 하면 컨테이너 내 위치에 따라 첫 번째 및 마지막 하위 요소를 식별하는 적절한 컨텍스트가 제공됩니다.

수정된 코드 버전은 다음과 같습니다.

.container {
  display: flex;
}

.area {
  height: 100px;
  width: 100px;
}

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

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

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

.container 내에 .area 요소를 중첩하면 명확한 계층 구조가 구축됩니다. :first-child 및 :last-child 의사 클래스는 이제 .container의 첫 번째 및 마지막 하위 요소를 정확하게 타겟팅할 수 있습니다.

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