부모를 모르고 n번째 자식 요소를 선택하려면 어떻게 해야 합니까?

범용 하위 선택기: 상위 요소와 독립적으로 n번째 하위 요소 선택

문제:

특정 하위 요소를 선택하는 것이 어려울 수 있습니다. 상위 요소가 알려지지 않았거나 동적 이름을 갖는 경우. :first-child 및 :nth-child 선택자는 존재하지만 지정된 상위 범위 내의 하위 항목만 대상으로 합니다.

질문:

어떻게 n번째, 먼저 할 수 있습니까? , 그리고 마지막 하위 요소는 상위 요소를 모르고 선택됩니까?

답변:

일반적인 인식과 달리 :first-child 및 :nth-child 선택자는 그렇지 않습니다. 효과적으로 작동하려면 특정 상위 요소가 필요합니다. 이러한 선택기는 부모가 지정되지 않은 경우에도 부모 내의 위치에 따라 적절한 자식 요소를 자동으로 대상으로 지정합니다.

설명하려면 다음 코드를 고려하세요.

<youdontknowwhat!>
   <p class="select-me">One</p>
   <p class="select-me">Two</p>
</youdontknowwhat!>

선택하려면 이 예에서.select-me 클래스가 있는 두 번째 단락에서는 다음 선택기를 사용하면 됩니다.

.select-me:nth-child(2)

이 선택기는 n번째 하위 항목을 직접 지정하므로 상위 요소의 이름이나 유형에 관계없이 작동합니다.

설명:

:first-child 및 :nth-child 선택자는 모든 요소와 일치하는 범용 하위 선택기 '*'를 활용합니다. 따라서 특정 상위 요소를 지정하지 않고 하위 요소를 선택하는 데 사용할 수 있습니다. nth-child(n) 구문은 상위 내의 n번째 하위 요소를 나타냅니다. 여기서 'n'은 지정된 위치입니다.

위 내용은 부모를 모르고 n번째 자식 요소를 선택하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!