CSS를 사용하여 첫 번째 및 마지막 하위 요소의 스타일을 올바르게 지정하려면 어떻게 해야 합니까?

CSS를 사용하여 첫 번째 및 마지막 하위 요소 선택

CSS 의사 클래스를 사용하여 웹 페이지에서 특정 하위 요소를 선택할 수 있습니다. 그러나 첫 번째 또는 마지막 하위 항목을 선택하려고 할 때 잠재적인 문제가 발생할 수 있습니다.

일반적인 함정은 상위 컨테이너를 고려하지 않고 하위 요소에 직접 스타일을 정의하는 것입니다. 다음 예를 들어보세요.

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

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

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

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

이 시나리오에서 CSS는 첫 번째 및 마지막 하위 요소가 영역 클래스가 있는 상위 요소의 직계 하위 요소가 아니기 때문에 원하는 스타일을 적용하지 않습니다. 이 문제를 해결하려면 하위 요소를 다른 상위 요소 내에 래핑해야 합니다.

.container {
  . . .
}

.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>

이렇게 수정하면 CSS 규칙이 컨테이너 요소 내의 첫 번째 및 마지막 하위 요소에 적용됩니다. 상위 컨테이너 내의 요소를 래핑하면 대상 하위 요소에 대한 특정 컨텍스트를 정의하여 해당 컨테이너 내의 위치에 따라 정확하게 스타일을 지정할 수 있습니다.

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