Der Unterschied zwischen nth-of-type und nth-child

Als ich mir CSS3 ansah, fand ich einen n-tel-Typ-Selektor, den ich selten verwendet hatte, also habe ich es wie folgt erklärt:

Der

:nth-of-type(n)-Selektor stimmt mit jedem Element überein, das das N-te untergeordnete Element eines bestimmten Typs des übergeordneten Elements ist.

Sieht dem n-ten Kind sehr ähnlich

Der

:nth-child(n)-Selektor stimmt mit dem N-ten untergeordneten Element überein, das zu seinem übergeordneten Element gehört, unabhängig vom Typ des Elements.

Was ist also der Unterschied zwischen den beiden? Experimentieren Sie damit.

HTML:

        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
            box：       </span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>我是p1<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>  
            <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>我是p2<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="pox"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
            pox：        </span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>我是p1<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>        
            <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>我是p2<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>        

CSS:

<span style="color: #800000;">        <style>
            .box</span>{<span style="color: #ff0000;">
                margin</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
                float</span>:<span style="color: #0000ff;"> left</span>;
            }<span style="color: #800000;">
            .pox</span>{<span style="color: #ff0000;">
                margin</span>:<span style="color: #0000ff;"> 100px 0 0 60px</span>;<span style="color: #ff0000;">
                float</span>:<span style="color: #0000ff;"> left</span>;
            }<span style="color: #800000;">
         .pox p:nth-child(1)</span>{<span style="color: #ff0000;">
                color</span>:<span style="color: #0000ff;"> red</span>;
            }<span style="color: #800000;">
         .box p:nth-of-type(1)</span>{<span style="color: #ff0000;">
                color</span>:<span style="color: #0000ff;"> red</span>;
            }<span style="color: #800000;">
        </style></span>

Die Ergebnisse scheinen die gleichen zu sein:

Ändern Sie den HTML-Code hier leicht:

         <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
            box：
            </span><span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>我是div1<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>我是p1<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>我是div2<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>我是p2<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="pox"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
            pox：
            </span><span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>我是div<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>我是p1<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>我是div2<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>我是p2<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>        

Ergebnis:

Hier wird festgestellt, dassnth-child nicht funktioniert. Warum ist das so?

Tatsächlich bezieht sich p:nth-of-type(n) auf das n-te p-Element unter dem übergeordneten Element, und p:nth-child(n) bezieht sich auf das n-te Element unter dem übergeordneten Element und dies Element ist p, andernfalls schlägt die Auswahl fehl.

Das erste untergeordnete Element unter pox ist hier div statt p, daher schlägt die Auswahl fehl. Wenn Sie möchten, dass p1 rot wird und p1 das zweite untergeordnete Element unter pox ist, sollten Sie nth-child(2) wählen und in

ändern

<span style="color: #800000;">.pox p:nth-child(2)</span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> red</span>; }

Ergebnis: