The difference between nth-of-type and nth-child-HTML Tutorial-php.cn

The difference between nth-of-type and nth-child

WBOY

Release： 2016-09-15 11:15:18

Original

1417 people have browsed it

When I was looking at CSS3, I found an nth-of-type selector. I found that I had rarely seen it used, so I did some research. W3c explained it like this:

The

:nth-of-type(n) selector matches every element that is the Nth child of a specific type of the parent element.

Looks very similar to nth-child

The

:nth-child(n) selector matches the Nth child element that belongs to its parent element, regardless of the element's type.

So what is the difference between the two? Experiment with it.

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>

Copy after login

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>

Copy after login

The results seem to be the same:

Change the HTML a little here:

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

Copy after login

Result:

It is found here that nth-child does not work. Why is this?

In fact, p:nth-of-type(n) refers to the nth p element under the parent element, and p:nth-child(n) refers to the nth element under the parent element and this element is p. If not , the selection fails.

The first child element under pox here is div instead of p, so the selection fails. If you want p1 to turn red, and p1 is the second child element under pox, you should choose nth-child(2), and should be changed to:

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

Copy after login

Result:

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

The difference between nth-of-type and nth-child