동일한 유형 중에서 마지막에서 세 번째 요소의 스타일을 선택하려면 :nth-last-of-type(3) 의사 클래스 선택기를 사용하십시오.

동일한 유형의 요소 중에서 마지막에서 세 번째 스타일을 선택하려면 :nth-last-of-type(3) 의사 클래스 선택기를 사용하세요. 구체적인 코드 예제가 필요합니다.

CSS에서는 종종 웹 페이지에서 마지막에서 세 번째 요소의 스타일을 선택합니다. 요소에 스타일이 지정됩니다. 때로는 동일한 유형의 요소 중에서 마지막에서 세 번째 요소를 선택하고 특정 스타일을 적용해야 하는 경우가 있습니다. 이때 :nth-last-of-type(3) 의사 클래스 선택기를 사용하여 이 작업을 완료할 수 있습니다.

먼저 :nth-last-of-type(3) 의사 클래스 선택기의 구문을 살펴보겠습니다.

:nth-last-of-type(n)

위 코드에서 n 는 정수를 나타내며, 끝에서 두 번째 요소를 선택함을 나타냅니다. 우리 요구 사항에서는 마지막에서 세 번째 요소를 선택해야 하므로 n을 3으로 설정했습니다.

다음으로 구체적인 예를 살펴보겠습니다.

HTML 코드:

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
    <li>列表项5</li>
    <li>列表项6</li>
</ul>

CSS 코드:

li:nth-last-of-type(3) {
    color: red;
    font-weight: bold;
}

위의 예에는 6개의 목록 항목이 포함된 순서가 지정되지 않은 목록이 있습니다. 목록의 마지막 항목에서 세 번째 항목을 선택하고 여기에 빨간색 글꼴과 굵은 스타일을 적용하려고 합니다. 이 목적을 달성하기 위해 :nth-last-of-type(3) 선택기를 사용할 수 있습니다.

위 코드를 실행하면 목록 항목 4가 마지막에서 세 번째 요소로 선택되고 빨간색 글꼴과 굵은 스타일이 적용됩니다. 다른 목록 항목은 영향을 받지 않습니다.

여기서 주의할 점은 :nth-last-of-type(3) 선택기를 사용할 때 선택기의 계층적 관계에 주의를 기울여야 한다는 것입니다. 대상 요소가 직계 자손 요소가 아니고 다른 요소에 중첩되어 있는 경우 특정 상황에 따라 선택기 작성 방식을 조정해야 합니다. 선택자의 계층적 규칙에 대해서는 CSS 선택자의 관련 사양을 참조할 수 있습니다.

요약하자면 :nth-last-of-type(3) 의사 클래스 선택기를 사용하면 동일한 유형 중에서 마지막에서 세 번째 요소를 쉽게 선택하고 지정된 스타일을 해당 요소에 적용할 수 있습니다. 위의 예를 통해 이 선택기를 빠르게 시작하고 사용 방법을 이해하여 실제 개발에 더 잘 적용할 수 있습니다.

위 내용은 동일한 유형 중에서 마지막에서 세 번째 요소의 스타일을 선택하려면 :nth-last-of-type(3) 의사 클래스 선택기를 사용하십시오.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!