CSS nth-of-type과 nth-child의 차이점은 무엇입니까?

차이: 일치하는 두 요소가 다릅니다. ":nth-of-type(n)" 선택기는 상위 요소에 속하는 특정 유형의 N번째 하위 요소와 일치합니다. n번째- "child(n)" 선택기는 상위 요소에 속하는 N번째 하위 요소와 일치하며 요소 유형은 제한되지 않습니다.

(권장 튜토리얼: CSS 비디오 튜토리얼)

1. :nth-child() 선택기

:nth-child(n) 선택기는 상위 요소 요소에 속한 N번째 하위 요소와 일치합니다. 요소 유형에 관계없이 n은 숫자, 키워드 또는 수식일 수 있습니다.

2. :nth-of-type(n)
:nth-of-type(n) 선택기는 상위 요소에 속하는 특정 유형의 N번째 하위 요소와 일치합니다. 요소 유형에는 제한이 없습니다. ; n은 숫자, 키워드 또는 수식일 수 있습니다.

3. 구체적인 차이점

먼저 코드를 살펴보세요

p:nth-of-type(7) 선택한 p 요소가 위치한 상위 요소 아래의 7번째 P 요소는 &lt ;p>7번째 p

<p>第7个p</p>

p:nth-child(6) 选择的 p元素所在的父元素下的第6个子元素，且该元素是P元素 即：<p>第5个p</p>

结果

4、odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词
odd选择奇数 even选择偶数

1. :nth-child(odd)

上述例子p:nth-child(odd)：选择的是P的父级元素下的，奇数元素且该元素是P元素, 所以是 <p>第二个段落。</p> 和 <p>第四个段落。</p> （ p:nth-child(n) n=3和 n=5）

2. :nth-child(even)

 -上述例子p:nth-child(even)：选择的是P的父级元素下的，偶数元素且该元素是P元素 ,所以是 <p>第一个段落。</p> 和 <p>第三个段落。</p> 和 <p>第五个段落。</p> （ p:nth-child(n) n=2和 n=4 和 n=6）

3. :nth-of-type(odd)

   
   -上述例子p:nth-of-type(odd)：选择的是P的父级元素下的，奇数的P元素 ,所以是 <p>第一个段落。</p> 和 <p>第三个段落。</p> 和 <p>第五个段落。</p> （ p:nth-of-type(odd) n=1和 n=3 和 n=5）

4. :nth-of-type(even)

   
   -上述例子p:nth-of-type(even)：选择的是P的父级元素下的，偶数的P元素 ,所以是 <p>第二个段落。</p> 和 <p>第四个段落。</p>

p:nth-child(6) 선택한 p 요소가 위치한 상위 요소 아래 6번째 하위 요소로 해당 요소는 P입니다. 요소, 즉: <p>5번째 p</p>

Result

4, 홀수 및 짝수는 하위 요소를 홀수 또는 짝수 첨자와 일치시키는 데 사용할 수 있는 키워드입니다. 🎜 홀수 선택 홀수는 짝수를 선택하세요🎜

1. 🎜:nth-child(odd)🎜🎜🎜🎜🎜🎜위의 예 p:nth-child(odd): P의 상위 요소 아래에서 홀수 요소를 선택합니다. 요소는 P 요소이므로 <p>의 두 번째 단락입니다. </p> 및 <p>네 번째 단락입니다. </p> (p:nth-child(n) n=3 및 n=5)🎜
   2. :nth-child(even)🎜🎜🎜 -위 예시 p:nth - child(even) : P의 부모 요소 아래 짝수 요소를 선택하고 해당 요소가 P 요소이므로 <p>의 첫 번째 문단이 됩니다. </p> 및 <p>세 번째 단락입니다. </p> 및 <p>다섯 번째 문단입니다. </p> (p:nth-child(n) n=2 및 n=4 및 n=6)🎜
      3. 🎜:nth-of-type( 이상한)🎜🎜🎜 -위의 예 p:nth-of-type(odd): P의 상위 요소 아래 홀수 번째 P 요소가 선택되었으므로 <p>의 첫 번째 단락입니다. </p> 및 <p>세 번째 단락입니다. </p> 및 <p>다섯 번째 문단입니다. </p> (p:n번째 유형(홀수) n=1 및 n=3 및 n=5)🎜🎜
      4. 🎜:n번째 유형(짝수)🎜🎜🎜 -위의 예 p : n번째 유형(짝수): 선택된 항목은 P의 상위 요소 아래에 있는 짝수 P 요소이므로 <p>의 두 번째 문단입니다. </p> 및 <p>네 번째 단락입니다. </p> ( p:nth-of-type(even) n=2 및 n=4 ) 🎜🎜🎜🎜5, :nth-of-type(an+b) 및 :nth-of -type(an+b) 규칙은 위에서 설명한 것과 동일합니다🎜 a는 기간의 길이를 나타내고, n은 카운터(0부터 시작), b는 오프셋 값입니다. 🎜 예: :nth-of-type( 2n+1)은 첫 번째, 세 번째, 다섯 번째 P 요소입니다. 🎜🎜🎜🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 소개🎜를 방문하세요! ! 🎜

위 내용은 CSS nth-of-type과 nth-child의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!