nth-child 및 :nth-of-type 선택기 사용에 대한 자세한 설명

이번에는 nth-child 및 :nth-of-type 선택기 사용에 대해 자세히 설명하겠습니다. nth-child 및 :nth-of-type 선택기 사용 시 주의사항은 무엇인가요? 1 일어나서 살펴보세요.

먼저 간단한 예를 살펴보겠습니다. 먼저 HTML 부분을 살펴보겠습니다.

<section>
    <p>我是第1个p标签</p>
    <p>我是第2个p标签</p>  <!-- 希望这个变红 -->
</section>

그러면 두 선택기에 해당하는 CSS 코드는 다음과 같습니다.

p:nth-child(2) { color: red; }

p:nth-of-type(2) { color: red; }

위 예에서 이 두 선택기에 의해 달성되는 효과는 일관됩니다. 두 번째 p 태그의 텍스트가 빨간색으로 변합니다.

위 두 데모의 최종 효과는 동일하지만 두 선택기 간의 차이점은 불가피합니다.

:nth-child 선택기의 경우 간단히 말해서 요소 선택을 의미합니다. :nth-child选择器，在简单白话文中，意味着选择一个元素：

1、这是个段落元素
2、这是父标签的第二个孩子元素

对于:nth-of-type

1 이것은 단락 요소입니다.

2 이는 상위 태그의 두 번째 하위 요소입니다.

:nth-of-type 선택기의 경우 요소 선택을 의미합니다.

1. 상위 태그의 두 번째 단락 하위 요소를 선택합니다.

위 예를 약간 수정하면 됩니다. 다음 HTML 코드에 표시된 대로 두 선택기의 차이점을 확인하세요.

<section>
    <p>我是一个普通的p标签</p>
    <p>我是第1个p标签</p>
    <p>我是第2个p标签</p>  <!-- 希望这个变红 -->
</section>

또는 위 예와 일치하는 CSS 테스트 코드:

p:nth-child(2) { color: red; }

p:nth-of-type(2) { color: red; }

이때 두 선택기는 결과를 렌더링합니다. 다를 것입니다.

p:nth-child(2) 렌더링 결과는 두 번째 p 태그 텍스트가 빨간색으로 변하는 것이 아니라 상위 태그의 두 번째 하위 요소인 첫 번째 p 태그가 빨간색으로 변하는 것입니다.

p:nth-of-type(2)의 성능은 매우 강력한 것으로 보이며 렌더링하려는 두 번째 p 태그를 빨간색으로 염색합니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

css3의 포인터 이벤트 사용에 대한 자세한 설명

focus-within🎜🎜🎜 사용에 대한 자세한 설명

위 내용은 nth-child 및 :nth-of-type 선택기 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!