CSS n번째 하위 및 n번째 유형 요소 검색 방법에 대한 자세한 설명

nth-child 및 nth-of-type은 CSS의 두 가지 의사 선택자입니다. 응용 프로그램에서는 이 둘을 혼동하는 경우가 많습니다. 그것들을 꺼내서 주의 깊게 비교하여 요소를 어떻게 찾는지 살펴보겠습니다. 이번 글에서는 CSS nth-child와 nth-of-type의 요소 검색 방법을 자세히 설명하는 관련 정보를 주로 소개합니다. 편집자는 꽤 좋다고 생각하여 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

1. nth-child(n) - n번째 하위 요소 찾기

2. nth-of-type(n) - 동일한 유형의 요소에서 n번째 요소 찾기

다음을 살펴볼 수도 있습니다. 이 정의에서는 차이점이 명확하지 않으므로 조금씩 구별해 보겠습니다.

p:nth-child(2) 및 p:nth-pf-type(2)

HTML 코드는 다음과 같습니다

<p>
<p style="float:left;width:200px;">
    <p>pgh1</p>
    <p>pgh2</p>
    <p>pgh3</p>
    <p>pgh4</p>
</p>
<p style="float:left;width:200px;">
    <h5>p1</h5>
    <h5>p2</h5>
    <h5>p3</h5>
    <h5>p4</h5>
</p>

두 가지 스타일을 각각 적용합니다. 둘 다 두 번째 요소를 찾습니다.

p:nth-child(2) {
    color: red;
    font-weight:bold;
}
h5:nth-of-type(2) {
    color: blue;
    font-weight:bold;
}

결과: 둘 다 성공적으로 적용되었습니다.

이제 HTML 코드를 일부 변경하여 다르게 보이도록 하겠습니다. 첫 번째 p 요소와 첫 번째 h5 요소를 label로 변경했습니다. 코드는 다음과 같습니다.

<p>
<p style="float:left;width:200px;">
    <label>pgh1</label>
    <p>pgh2</p>
    <p>pgh3</p>
    <p>pgh4</p>
</p>
<p style="float:left;width:200px;">
    <label>p1</label>
    <h5>p2</h5>
    <h5>p3</h5>
    <h5>p4</h5>
</p>

이제 스타일은 변경되지 않았습니다. 이제 효과를 살펴보고 nth-of-type(2)의 결과를 찾습니다. )이 변경되었습니다. 강조 표시된 것은 p3입니다. 이는 우리의 논리와 일치하는 것으로 간주됩니다. h5:nth-of-type(2)은 두 번째 h5 유형 요소인 p3을 찾고 있습니다.

HTML 코드를 계속 변경하세요. 첫 번째 p 요소와 첫 번째 h5 요소를 복원하고 두 번째 p 요소와 두 번째 h5 요소를 label로 변경합니다. 결과는 어떻게 될까요?

HTML은 다음과 같습니다.

<p>
<p style="float:left;width:200px;">
    <p>pgh1</p>
    <label>pgh2</label>
    <p>pgh3</p>
    <p>pgh4</p>
</p>
<p style="float:left;width:200px;">
    <h5>p1</h5>
    <label>p2</label>
    <h5>p3</h5>
    <h5>p4</h5>
</p>

CSS 변경되지 않음:

p:nth-child(2) {
    color: red;
    font-weight:bold;
}
h5:nth-of-type(2) {
    color: blue;
    font-weight:bold;
}

결과: n번째-child는 효과가 없으며 n번째 유형은 p3을 강조 표시합니다.

이게 왜죠?

1. nth-child는 여러 형제 요소 중에서 두 번째 요소를 찾는 것입니다. 그 요소가 무엇이든 상관없이 두 번째 요소입니다. 여기서 왼쪽의 p는 pgh2을 찾고, 오른쪽의 p는 p2를 찾습니다. 찾은 후 이전 선택자와 일치하면 스타일이 적용됩니다. 이전 선택자는 p입니다. 이는 요소가 p 유형이어야 함을 의미하지만 여기서는 모두 레이블이므로 이 스타일은 두 요소 모두에 적용되지 않습니다.

2. nth-of-type은 동일한 HTML 마크업 유형(Markup Type)을 가진 여러 형제 요소 중에서 발견된 두 번째 요소입니다. 왼쪽의 p에서

   pgh3

   는 오른쪽의 p에서 두 번째 순위의 요소입니다. h5 유형. 찾은 후 이전 선택자와 일치하면 스타일이 적용됩니다. 이전 선택기가 h5이면 오른쪽 p의

   p3

   요소에만 스타일이 적용되지만 왼쪽 p의

   pgh3

그래서 n번째 자식과 n번째 유형의 차이점은 요소를 찾는 방법입니다. 전자는 형제 요소 중에서 절대 위치에 있는 요소를 찾는 것이고, 후자는 같은 유형의 요소 중에서 절대 위치에 있는 요소를 찾는 것입니다. 유사점은 둘 다 요소를 찾은 다음 이전 선택기와 일치한다는 것입니다. 여기서 일치하는 방법은 동일합니다.

약간 아래쪽으로 확장하여 검색 방법을 명확히 하세요. 이전 선택기가 어떻게 변경되더라도 결국에는 요소를 먼저 찾은 다음 이전 선택기와 일치하게 됩니다. 이는 선택자가 검색 방법과 아무 관련이 없음을 의미합니다. 다른 조합으로 인해 혼동되지 않도록 이를 명확하게 하십시오.

1. p:nth-child(2) 정답: 두 번째 요소를 찾으세요. 이 요소는 p입니다. 틀림: p

2. .info:nth-child(2)로 두 번째 요소를 찾으세요. 맞음: 두 번째 요소를 찾으세요. 이 요소의 클래스에는 "info"가 포함되어 있습니다. 오류: 두 번째 클래스에 "info"가 포함된 요소를 찾으세요.

3. p:nth-of-type(2) 동일한 HTML 태그 유형의 두 번째 요소를 찾고 이 요소는 p입니다(또는 직관적으로 두 번째 p 유형 요소를 찾습니다)

4. .info :nth- of-type(2) 동일한 HTML 태그 유형에서 두 번째 요소를 찾고 이 요소의 클래스에 "info"가 포함되어 있습니다.

관련 권장 사항

PHP 배열에서 요소 검색 및 요소 제거 개선 높은 효율성 기술 분석, php array_PHP 튜토리얼

jQuery에서 일반적으로 사용되는 요소 검색 방법에 대한 간략한 분석 Summary_jquery

CSS3에서 n번째 자식과 n번째 유형의 차이점에 대한 자세한 설명

위 내용은 CSS n번째 하위 및 n번째 유형 요소 검색 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!