Was ist der Unterschied zwischen CSS nth-of-type und nth-child?

Unterschied: Die beiden übereinstimmenden Elemente sind unterschiedlich. Der Selektor „:nth-of-type(n)“ entspricht dem N-ten untergeordneten Element, das zum übergeordneten Element gehört. nth- Der Selektor „child(n)“ entspricht dem N-ten untergeordneten Element, das zu seinem übergeordneten Element gehört, und der Elementtyp ist nicht begrenzt. (Empfohlenes Tutorial:

CSS-Video-Tutorial) Unabhängig vom Elementtyp kann n eine Zahl, ein Schlüsselwort oder eine Formel sein.

2. :nth-of-type(n)

Der :nth-of-type(n)-Selektor entspricht dem N-ten untergeordneten Element eines bestimmten Typs, der zum übergeordneten Element gehört. Es gibt keine Begrenzung für den Elementtyp ; n kann eine Zahl, ein Schlüsselwort oder eine Formel sein.

3. Spezifische Unterschiede

Schauen Sie sich zunächst den Code an

p:nth-of-type(7) Das 7. P-Element unter dem übergeordneten Element, in dem sich das ausgewählte p-Element befindet, ist: &lt ;p>Das 7. p

p:nth-child(6) Das 6. untergeordnete Element unter dem übergeordneten Element, in dem sich das ausgewählte p-Element befindet, und das Element ist ein P Element, das heißt: <p>Das 5. p</p>

Ergebnis

<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>

   4, odd und even sind Schlüsselwörter, die verwendet werden können, um untergeordnete Elemente mit ungeraden oder geraden Indizes abzugleichen
ungerade Auswahl Wählen Sie für ungerade Zahlen gerade Zahlen aus

1. :nth-child(odd)
   
   

   

   Das obige Beispiel p:nth-child(odd): wählt ein ungerades Element unter dem übergeordneten Element von P aus und das Element ist ein P-Element, also ist es der zweite Absatz von <p>. </p> und <p>Der vierte Absatz. </p> (p:nth-child(n) n=3 and n=5)
   2. :nth-child(even) -Das obige Beispiel p:nth - child(even): Wählt ein gerade nummeriertes Element unter dem übergeordneten Element von P aus und das Element ist ein P-Element, also der erste Absatz von <p>. </p> und <p>Der dritte Absatz. </p> und <p>Fünfter Absatz. </p> (p:nth-child(n) n=2 und n=4 und n=6)🎜
      3. 🎜:nth-of-type( ungerade)🎜🎜🎜 -Das obige Beispiel p:nth-of-type(odd): Das ungeradzahlige P-Element unter dem übergeordneten Element von P wird ausgewählt, es ist also der erste Absatz von <p>. </p> und <p>Der dritte Absatz. </p> und <p>Fünfter Absatz. </p> (p:nth-of-type(odd) n=1 and n=3 and n=5)🎜🎜
      4. 🎜:nth-of-type(even)🎜🎜🎜 -Das obige Beispiel p : nth-of-type(even): Das ausgewählte ist das gerade nummerierte P-Element unter dem übergeordneten Element von P, also der zweite Absatz von <p>. </p> und <p>Der vierte Absatz. </p> ( p:nth-of-type(even) n=2 and n=4 ) 🎜🎜🎜🎜5, :nth-of-type(an+b) und :nth-of -type(an+b) Die Regeln sind die gleichen wie oben erklärt🎜 a stellt die Länge der Periode dar, n ist der Zähler (beginnend bei 0) und b ist der Offsetwert. 🎜 Zum Beispiel: :nth-of-type( 2n+1) ist das 1., 3. und 5. P-Element 🎜🎜🎜🎜🎜Weitere Programmierkenntnisse finden Sie unter: 🎜Einführung in die Programmierung🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen CSS nth-of-type und nth-child?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!