\'.class:last-of-type\'을 사용하여 특정 클래스의 마지막 요소를 올바르게 대상으로 지정하는 방법은 무엇입니까?

".class:last-of-type" 사용법 이해

CSS에서 ".class:last-of- 유형" 선택기는 주어진 상위 요소 내에서 특정 클래스의 마지막 요소를 대상으로 하는 데 사용됩니다. 그러나 이 의사 클래스는 요소에만 작동하므로 클래스에 적용할 수 없다는 점에 유의하는 것이 중요합니다.

제공된 예에서 ".visible:last-of-type" 선택기는 다음과 같이 설계되었습니다. 특정 div 내에서 ".visible" 클래스를 포함하는 마지막 단락(

) 요소를 표시합니다. 그런데 문제는 세 번째 문단에 ".visible" 클래스가 할당되지 않아 보이지 않게 렌더링되기 때문에 발생합니다.

선택성 문제 수정

이 문제를 해결하려면, ".visible" 클래스와 직계 상위 요소 내의 마지막 요소 위치를 모두 포함하는 요소를 대상으로 지정하도록 선택기를 변경해야 합니다.

p.visible:last-child

이 수정된 선택기는 스타일이 다음과 같아야 함을 지정합니다. ".visible" 클래스를 소유한 div 내의 마지막 단락 요소에 적용됩니다.

예시 데모

해결책을 설명하려면 다음 업데이트된 코드를 고려하세요.

<code class="css">p {
    display: none;
}
p.visible:last-child {
    display: block;
}</code>

<code class="html"><div>
  <p class="visible">First paragraph.</p>
  <p class="visible">Second paragraph.</p>
  <p class="visible">Third paragraph.</p>
</div></code>

이 수정된 코드에서는 세 문단 모두 ".visible" 클래스가 할당되어 마지막 문단이 표시됩니다.

결론

요소 선택과 클래스 선택의 차이를 이해하면 ".class:last-of-type" 의사 클래스를 효과적으로 활용하여 지정된 컨테이너 내에서 특정 클래스와 일치하는 최종 요소를 대상으로 할 수 있습니다.

위 내용은 \'.class:last-of-type\'을 사용하여 특정 클래스의 마지막 요소를 올바르게 대상으로 지정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!